flex瀑布流

用flex实现瀑布流，但是想横向依次排列item，参考https://wow.techbrood.com/fiddle/61501，实现了基本布局，主要思路是：

• 列布局
• order修改排序，使得其看起来像行布局

但是有两个问题：

• 在有滚动条的情况下，需要给容器加个固定高，不然就没有y滚动条，而是排到第二列；应用的场景是请求的数据，所以在遍历的时候还要计算最大高度
• 场景里还有搜索，在容器固定高度的情况下，搜索到的item高度比较小，会排成一列，而不是一行

目前的解决思路是，如果能计算出最高项目列的高度，则在搜索时每次都计算一次，但感觉有点复杂，而且会频繁重绘容器高度。
实在不行试试grid，到时候改个标题。

---

更新新方案：
参考https://material-components.github.io/material-components-web-catalog/#/component/image-list
核心用到了两个css属性

• column-count
• break-inside

第一个属性就是把块级元素分列，第二个属性是适配分列的元素不被割裂。

demo

很明显的问题就是仍为列排布，好处是不用设置高度。
代码如下

<style>
    .wrapper {
        width: 1000px;
        height: 700px;
        border: 1px solid #000;
        column-count: 3;
        column-gap: 16px;
    }
    li {
        padding: 50px;
        border: 1px solid #000;
        break-inside: avoid-column;
        margin-bottom: 12px;
        list-style: none;
    }
</style>
ul > li * 5