小程序 瀑布流

 

<view style="display:none">

<image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>

</view>

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">

<view style="width:100%">

<view class="img_item">

<view wx:for="{{col1}}" wx:key="id">

<image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>

</view>

</view>

<view class="img_item">

<view wx:for="{{col2}}" wx:key="id">

<image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>

</view>

</view>

</view>

</scroll-view>

 

 

 

 

 

 

/* 单个图片容器的样式 */

.img_item {

width: 48%;

margin: 1%;

display: inline-block;

vertical-align: top;

}

 

 

 

 

 

 

 

let col1H = 0;

let col2H = 0;

 

Page({

 

data: {

scrollH: 0,

imgWidth: 0,

loadingCount: 0,

images: [],

col1: [],

col2: []

},

 

onLoad: function () {

wx.getSystemInfo({

success: (res) => {

let ww = res.windowWidth;

let wh = res.windowHeight;

let imgWidth = ww * 0.48;

let scrollH = wh;

this.setData({

scrollH: scrollH,

imgWidth: imgWidth

});

//加载首组图片

this.loadImages();

}

})

},

 

onImageLoad: function (e) {

let imageId = e.currentTarget.id;

let oImgW = e.detail.width; //图片原始宽度

let oImgH = e.detail.height; //图片原始高度

let imgWidth = this.data.imgWidth; //图片设置的宽度

let scale = imgWidth / oImgW; //比例计算

let imgHeight = oImgH * scale; //自适应高度

let images = this.data.images;

let imageObj = null;

for (let i = 0; i < images.length; i++) {

let img = images[i];

if (img.id === imageId) {

imageObj = img;

break;

}

}

imageObj.height = imgHeight;

let loadingCount = this.data.loadingCount - 1;

let col1 = this.data.col1;

let col2 = this.data.col2;

 

//判断当前图片添加到左列还是右列

if (col1H <= col2H) {

col1H += imgHeight;

col1.push(imageObj);

} else {

col2H += imgHeight;

col2.push(imageObj);

}

 

let data = {

loadingCount: loadingCount,

col1: col1,

col2: col2

};

 

//当前这组图片已加载完毕，则清空图片临时加载区域的内容

if (!loadingCount) {

data.images = [];

}

 

this.setData(data);

},

 

loadImages: function () {

let images = [

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 },

{ pic: "../../images/download.jpg", height: 0 }

];

 

let baseId = "img-" + (+new Date());

 

for (let i = 0; i < images.length; i++) {

images[i].id = baseId + "-" + i;

}

 

this.setData({

loadingCount: images.length,

images: images

});

}

 

})