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

313 阅读1分钟

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

使用方式:

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]
}