瀑布流是一种流行的网页布局。这种效果的名称取自瀑布，悬挂在高处并自顶向下流淌，就像这种布局的视觉效果一样。瀑布流布局将元素按照垂直方向排列，以达到优化页面空间的效果，通常很受图片 - heavy 网站的欢迎。

原理：对每个 item 都使用绝对定位，left 和 top 都是 0， 最后根据容器大小、item 的高度通过计算来得到 item 的 transform 值

初始化结构#

我们先搭建一个简单的结构，然后为 container 设置一个 ref，在 useEffect 中获取所有 item 元素，并将其保存到 items 数组中。

监听窗口大小变化#

由于我们需要监听窗口大小变化，所以我们可以使用 ResizeObserver 监听容器的大小变化。
主要逻辑在 handleResize 函数中。

计算 item 的 transform 值 和 item 的宽度#

1. 首先我们可以获取容器的宽度，然后根据宽度来计算每一行放置多少 item，并计算每一个 item 的宽度。
2. 创建一个 columnsHeights 数组用来保存每一列的高度，初始化为 0。
3. 遍历所有 item，根据 item 的宽度来计算 item 的 transform 值，同时更新 columnHeights 的值。

完整代码#

总结#

瀑布流布局主要就是需要计算每行最小高度，然后根据最小高度来计算每个 item 的位置。
使用 transform 控制每个 item 的位置可以避免不必要的重排。