瀑布流又稱(chēng)瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局方式。視覺(jué)表現(xiàn)為參差不齊的多欄布局，即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求，依次放入到高度最低的那一欄。

先上代碼：https://developers.weixin.qq.com/s/Fgm5s1mz7Wdm

所謂簡(jiǎn)單，是指只考慮圖片，圖片之外的其他元素高度固定，不在考慮范圍內(nèi)。

說(shuō)一下基本的實(shí)現(xiàn)思路：
1、加載列表數(shù)據(jù)
2、在一個(gè)隱藏的view中加載圖片，通過(guò)image組件的bindload獲取圖片的實(shí)際寬高并存儲(chǔ)
3、等所有圖片加載完成后遍歷列表，將圖片插入到高度低的那一欄，同時(shí)更新該欄高度

我也考慮過(guò)在第二步bindload獲取到寬高后就直接插入到欄位中，但是會(huì)出現(xiàn)小的圖片先加載完先出現(xiàn)到頁(yè)面中，雖然瀑布流不是普通的列表那樣的排序，但是也不能小的圖片在上面這樣太亂順序，所以就改成了獲取寬高先存儲(chǔ)，等所有圖片加載完成后再往頁(yè)面上渲染。

來(lái)看看實(shí)際的代碼

不需要渲染到wxml中的數(shù)據(jù)，我放到了jsData中，主要是兩欄的高度和是否在加載數(shù)據(jù)的標(biāo)記。
tempPics是第一次加載的數(shù)據(jù)，臨時(shí)存放，用于加載圖片寬高
columns是兩個(gè)欄位的實(shí)際展示數(shù)據(jù)

jsData: {
 columnsHeight: [0, 0],
 isLoading: false
},
data: {
 columns: [
  [],
  []
 ],
 tempPics: []
}

1、加載列表數(shù)據(jù)

這一步?jīng)]什么好說(shuō)的，主要是觸發(fā)方式，我的代碼里是放在頁(yè)面加載以及拉大頁(yè)面底部時(shí)觸發(fā)

onLoad: function() {
 this.loadData()
},
onReachBottom: function() {
 this.loadData()
}

加載后將列表數(shù)據(jù)存到tempPics中，用于頁(yè)面加載獲取寬高

2、在一個(gè)隱藏的view中加載圖片，通過(guò)image組件的bindload獲取圖片的實(shí)際寬高并存儲(chǔ)

<view class="hide">
 <image wx:for="{{tempPics}}" src="{{item.pic}}" bindload="loadPic" binderror="loadPicError" data-index="{{index}}" />
</view>

主要是image組件的bindload來(lái)獲取實(shí)際寬高，這里還增加了binderror，防止出現(xiàn)圖片加載出錯(cuò)的時(shí)候卡死

loadPic: function(e) {
 var that = this,
  data = that.data,
  tempPics = data.tempPics,
  index = e.currentTarget.dataset.index
 if (tempPics[index]) {
  //以750為寬度算出相對(duì)應(yīng)的高度
  tempPics[index].height = e.detail.height * 750 / e.detail.width
  tempPics[index].isLoad = true
 }
 that.setData({
  tempPics: tempPics
 }, function() {
  that.finLoadPic()
 })
}

獲取到寬高后，以750為寬度計(jì)算出相對(duì)應(yīng)的高度并存儲(chǔ)，然后增加一個(gè)加載完成的標(biāo)記。加載出錯(cuò)后就強(qiáng)制高度為750，這樣展示的時(shí)候就是一個(gè)正方形。

單個(gè)圖片加載完成并存儲(chǔ)后調(diào)用finLoadPic方法來(lái)判斷所有圖片是否都加載完成。

遍歷列表，只要有一個(gè)圖片沒(méi)有加載完成的標(biāo)記，就判斷為沒(méi)有加載完成。

加載完成后進(jìn)入下一步。

finLoadPic: function() {
 var that = this,
  data = that.data,
  tempPics = data.tempPics,
  length = tempPics.length,
  fin = true
 for (var i = 0; i < length; i++) {
  if (!tempPics[i].isLoad) {
   fin = false
   break
  }
 }
 if (fin) {
  wx.hideLoading()
  if (that.jsData.isLoading) {
   that.jsData.isLoading = false
   that.renderPage()
  }
 }
}

3、等所有圖片加載完成后遍歷列表，將圖片插入到高度低的那一欄，同時(shí)更新該欄高度

這里需要再便利一遍列表，根據(jù)當(dāng)前欄位的高度情況，將圖片插入到高度底的那一欄，同時(shí)把這一欄高度加上當(dāng)前圖片的高度（不是實(shí)際高度，是上一步以750為寬度算出來(lái)的高度）

renderPage: function() {
 var that = this,
  data = that.data,
  columns = data.columns,
  tempPics = data.tempPics,
  length = tempPics.length,
  columnsHeight = that.jsData.columnsHeight,
  index = 0
 for (var i = 0; i < length; i++) {
  index = columnsHeight[1] < columnsHeight[0] ? 1 : 0
  columns[index].push(tempPics[i])
  columnsHeight[index] += tempPics[i].height
 }
 that.setData({
  columns: columns,
  tempPics: []
 })
 that.jsData.columnsHeight = columnsHeight
}

在wxml中展示的時(shí)候image組件的mode要使用widthFix，同時(shí)wxss中圖片的高度和寬度一樣，這樣加載出錯(cuò)的圖片可以正方形展示

11月21日增加：

根據(jù)網(wǎng)友@楊泉的建議，也嘗試了使用wx.getImageInfo來(lái)獲取圖片的寬高（點(diǎn)擊查看具體代碼），代碼也精簡(jiǎn)了很多。但是實(shí)際比較下來(lái)速度要比用image組件慢，初步推測(cè)原因是wx.getImageInfo會(huì)返回本地路徑，多了寫(xiě)本地臨時(shí)文件的時(shí)間

ps：用到瀑布流的地方，最好能后端直接返回圖片的寬高，省去小程序端獲取寬高的麻煩

再ps：我個(gè)人并不建議小程序端使用瀑布流

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論