小程序如何實現(xiàn)兩欄瀑布流效果

這篇文章主要介紹了小程序如何實現(xiàn)兩欄瀑布流效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

來看看實際的代碼

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

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

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

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

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

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

2、在一個隱藏的view中加載圖片，通過image組件的bindload獲取圖片的實際寬高并存儲

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

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

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

獲取到寬高后，以750為寬度計算出相對應的高度并存儲，然后增加一個加載完成的標記。加載出錯后就強制高度為750，這樣展示的時候就是一個正方形。

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

遍歷列表，只要有一個圖片沒有加載完成的標記，就判斷為沒有加載完成。

加載完成后進入下一步。

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、等所有圖片加載完成后遍歷列表，將圖片插入到高度低的那一欄，同時更新該欄高度

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

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中展示的時候image組件的mode要使用widthFix，同時wxss中圖片的高度和寬度一樣，這樣加載出錯的圖片可以正方形展示

11月21日增加：

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“小程序如何實現(xiàn)兩欄瀑布流效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!