瀑布流佈局是一種比較流行的頁面佈局方式，最典型的就是Pinterest.com ，每張卡片的高度不都一樣，形成一種參差不齊的美感。
在HTML5中，我們可以找到很多基於jQuery之類實現的瀑布流佈局插件，輕鬆做出這樣的佈局形式。在微信小程式中，我們也可以做出這樣的效果，不過由於小程式框架的一些特性，在實現思路上還是有一些差別的。
今天我們就來看看如何在小程式中去實作這種瀑布流佈局：
小程式瀑布流佈局
我們要實作的是固定2列的佈局，然後將圖片資料動態載入進這兩列中(而載入進來的圖片，會根據圖片實際的尺寸，來決定到底是放在左列還是右列中)。
/* 單個圖片容器的樣式*/.img_item { width: 48%; margin: 1%; display: inline-block; vertical-align: top;
####我們可以在Page中透過資料綁定，來傳遞要載入的圖片資訊到wxml中，讓
我們來看Page檔案中定義的onImageLoad函數。在其中，我們可以從傳入的事件物件e上，獲取到
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/1.png", height: 0 },
{ pic: "../../images/2.png", height: 0 },
{ pic: "../../images/3.png", height: 0 },
{ pic: "../../images/4.png", height: 0 },
{ pic: "../../images/5.png", height: 0 },
{ pic: "../../images/6.png", height: 0 },
{ pic: "../../images/7.png", height: 0 },
{ pic: "../../images/8.png", height: 0 },
{ pic: "../../images/9.png", height: 0 },
{ pic: "../../images/10.png", height: 0 },
{ pic: "../../images/11.png", height: 0 },
{ pic: "../../images/12.png", height: 0 },
{ pic: "../../images/13.png", height: 0 },
{ pic: "../../images/14.png", 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
});
}
}) 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/1.png", height: 0 },
{ pic: "../../images/2.png", height: 0 },
{ pic: "../../images/3.png", height: 0 },
{ pic: "../../images/4.png", height: 0 },
{ pic: "../../images/5.png", height: 0 },
{ pic: "../../images/6.png", height: 0 },
{ pic: "../../images/7.png", height: 0 },
{ pic: "../../images/8.png", height: 0 },
{ pic: "../../images/9.png", height: 0 },
{ pic: "../../images/10.png", height: 0 },
{ pic: "../../images/11.png", height: 0 },
{ pic: "../../images/12.png", height: 0 },
{ pic: "../../images/13.png", height: 0 },
{ pic: "../../images/14.png", 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
});
}
})這裡是顯示在兩列圖片的wxml程式碼，我們可以看到在
<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>以上是微信小程式中實作瀑布流佈局和無限加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！
