在进行瀑布流布局的时候,需要根据图片的高度进行瀑布流布局,另外一个需求是根据浏览量进行从左到右显示,服务器发送的是根据流量排好序的数据,但是我用bindload方法监听图片的加载情况,但是它不是按照服务器给的数据进行加载的导致,瀑布流的浏览量发生错乱,请问有没有好的方法按序加载
onImageLoad: async function (e) {
let isLast = e.currentTarget.dataset.last;
console.log("isLast is ", isLast);
let imageId = Number(e.currentTarget.id.split('-')[0]);
let imageIndex = Number(e.currentTarget.id.split('-')[1]);
console.log("imageIndex is ",imageIndex);
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let imgWidth = this.data.imageWidth; //图片设置的宽度
let scale = imgWidth / oImgW; //比例计算
let imgHeight = oImgH * scale; //自适应高度
//新请求的文章数据
let images = this.data.newAddEssays;
let imageLen = images.length;
let imageObj = null;
for (let i = 0; i < imageLen; i++) {
let img = images[i];
if (img.shopeid && img.shopeid === imageId) {
imageObj = img;
break;
} else if (img.pid && img.pid === imageId) {
imageObj = img;
} else if (img.eid && img.eid === imageId) {
imageObj = img;
}
}
if(imageObj !== null){
imageObj.height = imgHeight;
//记录下该图片是第几个被加载的
imageObj.index = imageIndex;
console.log("imageObj is ", imageObj);
let loadingCount = this.data.loadingCount - 1;
let col1 = this.data.col1;
let col2 = this.data.col2;
//只要第一列的列高度小于第二列就往第一列放,否则往第二列放
if (this.data.col1H <= this.data.col2H) {
this.data.col1H += imgHeight;
col1.push(imageObj);
} else {
this.data.col2H += imgHeight;
col2.push(imageObj);
}
console.log("col1 is ", col1);
console.log("col1H is ", this.data.col1H);
console.log("col2 is ", col2);
console.log("col2H is ", this.data.col2H);
this.setData({
col1H: this.data.col1H,
col2H: this.data.col2H
})
let data = {
loadingCount: loadingCount,
本文网址:http://www.91bianli.com/weixinxiaochengxu/43650.html