瀑布流无限加载

技术栈：vue + vant

1，column 布局

    // 部分代码，仅供参考
    .content {
      margin: 0rem 0.27rem 0;
      column-count: 2;  // 想分几行你说了算
      column-gap: 10px;  // 可以去掉试试
      .list {
        background: #ffffff;
        box-shadow: 0px 7px 32px 0px rgba(7, 0, 2, 0.42);
        border-radius: 5px;
        font-size: 0.24rem;
        font-weight: 400;
        color: #959595;
        margin: 0 0 0.27rem 0;
        &:nth-child(2n) {
        }
        .list_image {
          margin: 0.1rem;
        }
        .list_title {
          height: 0.8rem;
          margin: 0 0.1rem;
        }
      }
    }

看起来很不错吧，但是如果你想引用下拉加载就会出现意想不到的效果。

这这这，搞毛线呀。哈哈哈，如果你没有无限加载的需求这种是个不错的选择的，无限加载的办法岂请往下看
2，js && flex

思路：把数据分为两个数组，默认添加到A数组，如果B数组的高度小于A数据则添加到B，反之则添加到A，最后利用 flex布局

核心代码：

  updatFill() {
    // A数组
    const leftHeight = this.$refs.left.clientHeight;
    // B数组
    const rightHeight = this.$refs.right.clientHeight;
    // 每次从数组中取第一个，原始组改变
    let item = this.dataList.shift();
    if (item == null) {
      return;
    }
    // A <= B A+
    if (leftHeight <= rightHeight) {
      this.leftItems.push(item);
    }  else {
     // B+
      this.rightItems.push(item);
    }
    this.$nextTick(function () {
      this.updatFill();
    });
  }