最简瀑布流方案是使用grid-template-rows: masonry，配合grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，现代浏览器原生支持，无需JS、不触发重排、安全降级为单列流。
用 CSS Grid 实现最简瀑布流，无需 JS
现代浏览器（Chrome 105+、Firefox 100+、Safari 16.4+）原生支持 grid-template-rows: masonry，这是目前最轻量、最稳定的瀑布流方案。它不依赖 JS 计算高度、不触发重排、不需监听图片加载，直接靠 CSS 布局引擎自动分列。
常见错误是误用 grid-auto-flow: column 模拟瀑布流——那只是“按列填满”，元素仍按源顺序垂直堆叠，无法真正响应内容高度变化。
实操要点：
- 容器设
display: grid+grid-template-rows: masonry（注意：必须搭配grid-template-columns显式定义列数或列宽） - 子项不能设
rowspan或grid-row，否则破坏 Masonry 自动布局 - 若需兼容老浏览器，此方案会退化为单列流（安全降级），不是报错或错位
<div class="masonry">
<article>@@##@@<p>内容短</p></article><article>@@##@@<p>内容特别长……</p></article>
</div>
<p><style>
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: masonry; /<em> 关键 /
}
</style></p>
图片加载导致高度塌陷？用 aspect-ratio 锁定占位
瀑布流最常崩在图片异步加载完成前：DOM 渲染时图片高度为 0，Masonry 按 0 高度排列，等图加载完才突然撑开，造成跳闪甚至错列。
不用 JS 监听 load 事件，也不用预设固定 height（会拉伸图）。直接用 aspect-ratio 告诉浏览器“这个容器宽高比是固定的”，浏览器就能预留正确空间。
使用场景：所有含图片的瀑布流卡片，尤其响应式布局中宽度动态变化时。
- 写法：
img { aspect-ratio: 4/3; object-fit: cover; }或包裹<div style="aspect-ratio: 4/3"><img src="1.jpg"></div> - 不支持
aspect-ratio的旧浏览器（如 Safari 15.4 及更早）会忽略该声明，但不会报错——此时可配合min-height做弱降级 - 避免对
article父容器设aspect-ratio，它可能含多行文字，比例不固定
IE 和旧 Safari 怎么办？用 column-count 降级方案
如果项目必须支持 IE11 或 Safari ≤ 15.3，grid-template-rows: masonry 不生效，这时别硬套 JS 插件。CSS 多列布局（column-count）虽不是真瀑布流（所有列等高，底部留白），但视觉接近、零 JS、兼容性极好。
关键差异：它把内容当“文本流”切分，所以子项必须是 break-inside: avoid，否则会被劈成两半。
- 容器加：
column-count: 3; column-gap: 1rem; - 每个卡片加：
break-inside: avoid;（Firefox 还要加page-break-inside: avoid） - 注意：不能设
height，否则列高被截断；也不能用flex或grid子项，会破坏流式切分 - 性能优势：纯 CSS，无 JS 计算、无 ResizeObserver、无 layout thrashing
为什么不用 Masonry.js 或 Vue/VueUse 的瀑布流组件？
这些库本质是用 JS 测量每个子项高度，再手动计算位置并 position: absolute 排布。问题很实际：
- 图片未加载完就测量 → 高度为 0 → 卡片叠在一起
- 字体加载延迟（如自定义 webfont）→ 文字换行变化 → 高度重算 → 触发二次布局抖动
- 滚动时频繁调用
getBoundingClientRect()→ 强制同步布局 → 页面卡顿，尤其在低端安卓机 - SSR 场景下服务端无 DOM，JS 版本首次渲染空白或错位，需额外逻辑 hydrate
除非业务强依赖 IE11 且必须精确对齐列底边，否则优先用 grid-template-rows: masonry。它的“复杂点”其实只有一个：确认目标浏览器版本是否达标——查 caniuse 上 css-masonry 支持表，比调试 JS 布局逻辑省心得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
