瀑布流排版

此篇文章说明如何实现页面瀑布流排版。

何为瀑布流，先看看效果图。

前言：在此之前，我阅读过其他博主的瀑布流方案，多数人实现方案为以下两种：

方案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
    })
  })
})