弹性盒子flex布局轻松实现瀑布流

这里介绍下简单实现瀑布流的方法，适合一次性加载完的数据列表。

如果是分页加载那就需要更复杂的计算了，但也可以在本案例的基础上进行扩展。

关键代码：

js部分：

let columCount = 2
let goodsList = this.properties.goodsList
//创建跟列数相同的新列表
let waterFallArr = new Array(columCount)
//向新列表填充数据，按原列表中的顺序依次赋给各子列表
goodsList.forEach((item, index) => {
    let newArr = waterFallArr[index % columCount] //
    if (newArr == undefined || newArr == 'undefined') {
        newArr = []
    }
    newArr.push(item)
    waterFallArr[index % columCount] = newArr
})
this.setData({
    waterFallArr: waterFallArr
})

如上，新建一个列表，然后根据模运算，将原列表中的数据依次赋给新列表的各个子列表中即可，这样跟原列表展示顺序就一致了。

wxml部分：

<view class="goodsList">
    <view class="goodsItemBox flex column align_center" style="width: 50%;" wx:for="{{waterFallArr}}" wx:key="{{index}}">
        <view class="goodsItem" wx:for="{{item}}" wx:key="key">
            ......
        </view>
    </view>
</view>

如上，即可实现一次性加载数据的瀑布流展示，其实就是分多列进行展示的，也就是重组下数据而已。

分页加载瀑布流的思考：

1. 每列高度差别不是很大——先不考虑高度问题，分页加载可以把每页展示的数据设置为瀑布流列数的整倍数，这样每页数据追加到子列表中数量都相同，数据就好处理了。这种方法可能不是最优的，但是应该是最简单的了，也就计算每列数据加载后的高度可能复杂点。

2. 每列高度差别有点大，但是一页加载下来整体高度区别不大——那么每页加载之后计算下当前列表每列的高度，然后下一页数据分配的时候要优先补给高度最小的一个，后续分页就按这个规则追加数据就可以了。

3. 每列高度差别比较大——终极方案就是结合列表子项布局及样式，根据子项内容计算每项高度。可以先分配一行数据，然后根据每列的高度，后边每一条数据都添加到高度最小的那一列，添加之后重新计算高度，以此类推。这种方法是最优的，只要高度计算比较准确，那么展示肯定是三种解决方案里边最好的。