这里介绍下简单实现瀑布流的方法，适合一次性加载完的数据列表。
如果是分页加载那就需要更复杂的计算了，但也可以在本案例的基础上进行扩展。
关键代码：
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. 每列高度差别比较大——终极方案就是结合列表子项布局及样式，根据子项内容计算每项高度。可以先分配一行数据，然后根据每列的高度，后边每一条数据都添加到高度最小的那一列，添加之后重新计算高度，以此类推。这种方法是最优的，只要高度计算比较准确，那么展示肯定是三种解决方案里边最好的。