把一个数组根据数组内部的图片的高度,拆分成两个数组,组成瀑布流数据的方法。
使用方式:
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]
}