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

朴灿烈づ我的快乐病毒、 2022-12-30 01:28 131阅读 0赞

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

使用方式：

async created() {
    	var arr = this.$mock.sssdata.data.lists;
        //arr 是一个数组，里面包含若干对象，对象里面有图片
    
    	var myArr = await this.getArrImgHeight(arr,'faceimg')
        //调用我封装的方法，图片属性是faceimg
    
    	console.log('myArr',myArr)
    },

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]![20201223192457251.png][]

封装的代码：

/* 
    	函数说明：瀑布流获取图片高度计算方法，会把原数组拆分成两个数组返回
    	参数说明：
    	必填：
    		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]
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201223192314408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy,size_16,color_FFFFFF,t_70
[20201223192457251.png]: /images/20221120/d58bf91302e74fec8cb913f303494ebc.png