新聞中心
前言
為華寧等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及華寧網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、華寧網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
瀑布流布局是一種比較流行的頁面布局方式,最典型的就是Pinterest.com,每個(gè)卡片的高度不都一樣,形成一種參差不齊的美感。
在HTML5中,我們可以找到很多基于jQuery之類實(shí)現(xiàn)的瀑布流布局插件,輕松做出這樣的布局形式。在微信小程序中,我們也可以做出這樣的效果,不過由于小程序框架的一些特性,在實(shí)現(xiàn)思路上還是有一些差別的。
今天我們就來看一下如何在小程序中去實(shí)現(xiàn)這種瀑布流布局:

小程序瀑布流布局
我們要實(shí)現(xiàn)的是一個(gè)固定2列的布局,然后將圖片數(shù)據(jù)動(dòng)態(tài)加載進(jìn)這兩列中(而加載進(jìn)來的圖片,會(huì)根據(jù)圖片實(shí)際的尺寸,來決定到底是放在左列還是右列中)。
/* 單個(gè)圖片容器的樣式 */
.img_item {
width: 48%;
margin: 1%;
display: inline-block;
vertical-align: top;
}我們知道,在HTML中,我們要?jiǎng)討B(tài)加載圖片的話,通常會(huì)使用new Image()創(chuàng)建一個(gè)圖片對(duì)象,然后通過它來動(dòng)態(tài)加載一個(gè)url指向的圖片,并獲取圖片的實(shí)際尺寸等信息。而在小程序框架中,并沒有提供相應(yīng)的JS對(duì)象來處理圖片加載。其實(shí)我們可以借助wxml中的
我們可以在Page中通過數(shù)據(jù)綁定,來傳遞要加載的圖片信息到wxml中,讓
我們來看一下Page文件中定義的onImageLoad函數(shù)。在其中,我們可以從傳入的事件對(duì)象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; //圖片設(shè)置的寬度
let scale = imgWidth / oImgW; //比例計(jì)算
let imgHeight = oImgH * scale; //自適應(yīng)高度
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;
//判斷當(dāng)前圖片添加到左列還是右列
if (col1H <= col2H) {
col1H += imgHeight;
col1.push(imageObj);
} else {
col2H += imgHeight;
col2.push(imageObj);
}
let data = {
loadingCount: loadingCount,
col1: col1,
col2: col2
};
//當(dāng)前這組圖片已加載完畢,則清空?qǐng)D片臨時(shí)加載區(qū)域的內(nèi)容
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代碼,我們可以看到在
好了,挺簡單的一個(gè)例子,如果你有更好的方法,不吝分享一下哦。
完整代碼可以在Github下載:https://github.com/zarknight/wx-falls-layout 也可以通過本地進(jìn)行下載
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
本文名稱:微信小程序?qū)崿F(xiàn)瀑布流布局與無限加載的方法詳解
網(wǎng)頁路徑:http://fisionsoft.com.cn/article/jdjpes.html


咨詢
建站咨詢
