瀑布流排版

此篇文章說明如何實現頁面瀑布流排版。

何爲瀑布流，先看看效果圖。

前言：在此之前，我閱讀過其他博主的瀑布流方案，多數人實現方案爲以下兩種：

方案1、在頁面渲染時按照奇偶數交替渲染在左右兩列中。

方案2、將請求到的數據按奇偶數分別向兩個數組，然後頁面中渲染爲左右兩列。

以上兩個方案都存在一個問題，當列表數據量大時，可能會出現左右兩邊長度相差較大的情況。

我們可以在方案2的基礎再優化一下：在向兩個數組中添加數據前，我們可以先判斷一下兩者的長度，優先向長度的短的一方添加數據，注意，一般適合在加載下一頁數據時判斷兩者長短。一般單頁數據不會很多可以使用這種方案，如果一次性加載數據條目數很大，可以將數據分段渲染。

 

方案思路已經說明，沒什麼好講，簡單粗暴直接上代碼，以下通過小程序端實現爲示例：

// 請求數據
request(api).then(res=>{    // 數據獲取成功
  let leftHeight = 0;   // 左側列表高度
  let rightHeight = 0;  // 右側列表高度
  const query = wx.createSelectorQuery()
  query.select('#leftList').boundingClientRect()  // 查詢左側節點
  query.select('#rightList').boundingClientRect() // 查詢右側節點
  query.selectViewport().scrollOffset()
  query.exec( res2=> {
    leftHeight = res2[0].height;    // 賦值當前左側列表高度
    rightHeight = res2[1].height;   // 賦值當前右側列表高度
    let dataList = res.navAd || [];
    if(dataList.length == 0){    // 如果請求的數據爲空數組
      this.setData({
        noMore: true
      })
      return false; // 沒有數據就不往下執行了
    }
    let dataLeftList = this.data.dataLeftList;  // 左側列表
    let dataRightList = this.data.dataRightList;  // 右側列表
    if(this.data.page == 1){  // 如果第一頁，清空列表
      dataLeftList = [];
      dataRightList = [];
    }
    dataList.forEach((item, index)=>{
      if(leftHeight <= rightHeight || this.data.page == 1){  // 如果左側不高於右側，優先給左側添加，或者頁碼爲1時
        if(index % 2 == 0){   // 單雙數左右邊輪流在尾部添加一個對象（單數添加左邊）
          dataLeftList.push(item)
        }else{
          dataRightList.push(item)
        }
      }else{
        if(index % 2 == 0){   // 單雙數左右邊輪流在尾部添加一個對象（單數添加右邊）
          dataRightList.push(item)
        }else{
          dataLeftList.push(item)
        }
      }
    })
    this.setData({
      dataLeftList,
      dataRightList
    })
  })
})