瀑布流布局：不了代码代码

瀑布流布局是一种比较流行的页面布局方式，表现为参差不齐的多栏卡片。跟网格布局相比，显得更灵动，更具艺术气息。

实现瀑布流布局的方式有多种，比如multi-column布局，grid布局，flex 布局等。但是这些实现方式都有各自的局限性，代码也略复杂。

其实，有个最原始、最简单，也是兼容性最好的实现方式，那就是使用绝对定位。瀑布流布局的元素是一些等宽不等高的卡片纯css实现瀑布流布局，只要根据元素的实际宽高计算出自己的坐标位置就行了。

要计算坐标自然要用到 JavaScript纯css实现瀑布流布局，这就不是纯 CSS 方案，对某些前端极客来讲显得不那么纯粹。不过只要理清思路了，也用不了几行代码。本文就给出最近实现的一个版本。

<pre style="color: inherit;font-size: inherit;line-height: inherit;">// 计算每个卡片的坐标 export function calcPositions({ columns = 2, gap = 7, elements }) { if (!elements || !elements.length) { return []; } const y = []; //上一行卡片的底部纵坐标数组，用于找到新卡片填充位置 const positions = []; // 每个卡片的坐标数组 elements.forEach((item, index) => { if (y.length { item.style.cssText = left:${positions[index].left}px;top:${positions[index].top}px;; }); this.$el.style.height = ${containerHeight}px; }, }, }; .masonry-lite{ position: relative; } .masonry-item { position: absolute; } </pre>

使用组件：

<pre style="box-sizing: border-box;font-size: 16px;line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);"> {{ item.title }} </pre>

不过这样其实还会有点问题，就是doLayout的执行时机。因为该方案基于绝对定位，需要元素在渲染完成后才能获取到实际宽高。如果卡片内有延迟加载的图片或者其他动态内容，高度会发生变化。这种情况下就需要在DOM更新后主动调用一次doLayout重新计算布局。

瀑布流与圣杯布局_ajax实现瀑布流加载_纯css实现瀑布流布局

如果大家有更好的实现方案，欢迎交流！

代码仓库：

npm 包：masonry-lite

如果觉得对你有帮助，帮忙点个不要钱的star。

<pre data-tool="mdnice编辑器" style="outline: 0px;letter-spacing: 0.544px;color: rgb(0, 0, 0);font-size: 16px;font-weight: 700;text-align: left;widows: 1;word-spacing: 2px;background-color: rgb(255, 255, 255);"><p style="margin-bottom: 20px;outline: 0px;letter-spacing: 0.544px;white-space: normal;line-height: 1.8em;color: rgb(58, 58, 58);font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;">往期干货：