目录 (Outline)
- 一、 瀑布流布局的困境：从 JS 时代到 CSS 的妥协
- 二、 核心原理：Grid 与 Masonry 的深度融合
- 三、 实战演练：三行代码实现高性能瀑布流
- 四、 进阶：处理非均匀网格与交互动画
- 五、 总结与浏览器支持建议
一、 瀑布流布局的困境：从 JS 时代到 CSS 的妥协
1. 历史背景
典型的瀑布流布局（如 Pinterest）要求：等宽、不等高、且紧密排列。
2. 过去的方案
- JS 插件 (Masonry.js)：通过绝对定位（Absolute Positioning）计算每个方块的坐标。缺点是性能开销大，窗口缩放时容易闪烁。
- CSS Multi-column：虽然能实现瀑布流，但它是「垂直排列」的。如果你想让最新发布的图片排在最左上角，它做不到。
- Flexbox/Grid 模拟：需要手动拆分多个容器，代码极度冗余。
二、 核心原理：Grid 与 Masonry 的深度融合
CSS 官方最终决定将 Masonry 作为 Grid 布局的一个扩展值。
1. 核心属性：grid-template-rows: masonry
不同于传统的 Grid 布局需要预先定义行高，masonry 值告诉浏览器：行高是不确定的，请根据内容高度自动「填坑」。
三、 实战演练：三行代码实现高性能瀑布流
代码示例
<div class="masonry-container">
<div class="item">内容 1...</div>
<div class="item">内容 2 (超长)...</div>
<div class="item">内容 3...</div>
<!-- 更多项目 -->
</div>
<style>
.masonry-container {
display: grid;
/* 定义列数：等分为 3 列 */
grid-template-columns: repeat(3, 1fr);
/* 开启魔法：行方向采用瀑布流算法 */
grid-template-rows: masonry;
/* 设置间距 */
gap: 16px;
}
.item {
background: #f0f0f0;
padding: 10px;
border-radius: 8px;
}
</style>
四、 进阶：处理非均匀网格与交互动画
1. 跨列处理
Masonry 同样支持 grid-column 跨列属性。
.item.wide {
grid-column: span 2; /* 跨两列，瀑布流依然会自动处理下方的填坑 */
}
2. 内容排序 (masonry-auto-flow)
通过 masonry-auto-flow 属性，你可以控制元素的放置顺序：
pack：极致填坑，不保证顺序。next：保证 DOM 顺序，即使留白也要按顺序放。
五、 总结与浏览器支持建议
1. 为什么它是革命性的？
- 性能：由浏览器渲染引擎的原生 C++ 代码处理，性能远超 JS 计算。
- 响应式：配合
repeat(auto-fill, minmax(...))，可以实现完美的自适应布局。
2. 支持现状 (截止 2024 年)
目前该特性处于 Stage 2 阶段。
- Firefox：最早支持（需开启
layout.css.grid-template-rows-masonry.enabled）。 - Chrome/Safari：正在积极实现中。
3. 建议
在生产环境，目前建议采用 Grid + JS Polyfill 的方案。一旦原生支持普及，只需删掉 JS，将 grid-template-rows 改为 masonry 即可无缝迁移。
CSS Masonry 的到来，意味着 Web 布局最后一块顽固的阵地也即将被原生 CSS 攻克。
