flex实现瀑布流布局并实现从左到右排序（order）

flex结合order实现从左到右的瀑布流

这种方式可以做到先从左到右，再从上到下显示
缺点：需要预先设定flex容器的高度，且调整页面大小时会出现一些间距过大的问题
应对：列表改变时，动态计算flex所需高度

缺陷：整体上的每列数量还是按列平均分布的，并未进行填充。

关键代码

• vue

//vue代码
 watch: {
    itemList(newVal) {
      // 为瀑布流重新计算布局
      this.$nextTick(() => {
        const items = document.getElementsByClassName('catalog-item')
        let totalHeight = 0
        // 计算每列的高度
        const columnHeights = [0, 0, 0, 0]
        for (let i = 0; i < items.length; i++) {
          totalHeight += items[i].clientHeight
          columnHeights[i % 4] += items[i].clientHeight
        }
        this.panelHeight = totalHeight / 4 + 100
        // document.body.style.setProperty('--waterfallHeight', `${(totalHeight + maxHeight) / 4}px`)
        // 设置最高列为高度
        document.body.style.setProperty('--waterfallHeight', `${Math.max(...columnHeights) + 10}px`)
      })
    }
  },

• css

.catalog-list {
  display:flex;
  // margin:0 auto;
  flex-direction: column;
  flex-wrap: wrap;
  height: var(--waterfallHeight, 5000px);
}
.catalog-item {
  // box-sizing: border-box;
  // break-inside:avoid;
  position: relative;
  width: 300px;
  padding: 20px;
  padding-bottom: 35px;
  counter-increment: item-counter;
  //改变元素排序，使其成为由左至右的瀑布流
  &:nth-child(4n+1){
    order:0;
  }
  &:nth-child(4n+2){
    order:1;
  }
  &:nth-child(4n+3){
    order:2;
  }
  &:nth-child(4n+4){
    order:3;
  }
}

效果

• 参考
  纯css实现简单瀑布流(flex 和 column-count 两种方式)