瀑布流排版

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

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

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

方案1、在页面渲染时按照奇偶数交替渲染在左右两列中。

方案2、将请求到的数据按奇偶数分别向两个数组，然后页面中渲染为左右两列。

以上两个方案都存在一个问题，当列表数据量大时，可能会出现左右两边长度相差较大的情况。

我们可以在方案2的基础再优化一下：在向两个数组中添加数据前，我们可以先判断一下两者的长度，优先向长度的短的一方添加数据，注意，一般适合在加载下一页数据时判断两者长短。一般单页数据不会很多可以使用这种方案，如果一次性加载数据条目数很大，可以将数据分段渲染。

 

方案思路已经说明，没什么好讲，简单粗暴直接上代码，以下通过小程序端实现为示例：

// 请求数据
request(api).then(res=>{    // 数据获取成功
  let leftHeight = 0;   // 左侧列表高度
  let rightHeight = 0;  // 右侧列表高度
  const query = wx.createSelectorQuery()
  query.select('#leftList').boundingClientRect()  // 查询左侧节点
  query.select('#rightList&