微信小程序开发 懒加载+瀑布流+排序功能

在小程序的开发过程中，遇到了这样的功能需求：在保持瀑布流布局的情况下，使用懒加载来渲染页面，并且要求对其中的属性添加排序功能。

单独拿出来都是很好实现的功能，但是当三个功能联系在一起时，问题就出现了。

最开始采用了CSS的方式来实现瀑布流，即通过属性column-count来控制列数，但很快发现，这样的瀑布流的顺序是从上到下后再从左到右，与原型图的要求并不符合，况且在加上懒加载后，由于整体的数据数量发生了变化，整个瀑布流相当于又重新加载了一次，不仅不能实现功能，还加大了加载的压力

所幸瀑布流还可以通过JS来进行实现，在查阅了相关的方法后，找到了符合要求的写法，具体如下：

采用左右两列布局，实时判断两侧的高度，当一侧大于另一侧时，就将对应的内容添加到少的一侧

js代码：

async isLeft(list, leftList, rightList) {
    let t = this;
    query = wx.createSelectorQuery();
    for (const item of list) {
      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度，来决定添加到那边
      await this.getBoxHeight(leftList, rightList);
    }
    console.log(leftList, rightList);
    setTimeout(() => {
      t.setData({