小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码

本文链接：https://blog.csdn.net/qq_35713752/article/details/111597162

本文介绍了一种用于实现瀑布流布局的算法，该算法通过计算图片高度并将数组拆分为两个子数组来平衡瀑布流布局的视觉效果。适用于需要展示不同尺寸图片的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把一个数组根据数组内部的图片的高度，拆分成两个数组，组成瀑布流数据的方法。

使用方式：

async created() {
	var arr = this.$mock.sssdata.data.lists;
    //arr 是一个数组，里面包含若干对象，对象里面有图片

	var myArr = await this.getArrImgHeight(arr,'faceimg')
    //调用我封装的方法，图片属性是faceimg

	console.log('myArr',myArr)
},

arr的数据格式与取到的结果的数据格式：

封装的代码：

/* 
	函数说明：瀑布流获取图片高度计算方法，会把原数组拆分成两个数组返回
	参数说明：
	必填：
		arr：数组，里面有对象，对比对象里面的图片高度，返回两个数组
		attributeName：要根据数组里对象指定属性名称（图片的 Key）
	非必填：
		otherHeight：瀑布流的盒子其它组成部分的高度，例如点赞那列，因为瀑布流不单单是图片组成
		minHeight: 图片最小高度，如果没有图片，也会使用最小高度，相当于默认高度
		maxHeight:图片最大高度，高于就按照 maxHeight 算
*/
async function getArrImgHeight(arr = [], attributeName, otherHeight = 200, minHeight = 10, maxHeight = 1000) {
	var arr1 = [],
		arr2 = [],
		imgMargin = 0, //图片边距
		height1 = 0, //第一组图片累计高度
		height2 = 0; //第二组图片累计高度

	// var getSystemInfo = await wx.getSystemInfo()
	for (let i = 0; i < arr.length; i++) {
		let heightData = await uni.getImageInfo({
			src: arr[i][attributeName]
		});
		let ImgHeight = heightData.length == 1 ? minHeight : heightData[1].height //如果长度等于1，就是图片有问题，这时候设置一个默认高度，如果长度等于2，下标1就有图片高度
		let imgWidth = heightData.length == 1 ? minHeight : heightData[1].width //如果长度等于1，就是图片有问题，

		let height = ImgHeight;
		if (height < minHeight) height = minHeight;
		if (height > maxHeight) height = maxHeight;
		height = height + otherHeight;

		if (height1 <= height2) {
			height1 += height
			arr1.push(arr[i])
		} else {
			height2 += height
			arr2.push(arr[i])
		}
		console.log('1111111', height,height1,height2)
		// console.log('arr2',height1,height2,arr1,arr2);
	}
	return [arr1, arr2]
}