CSS 瀑布流，别再只靠 JS 库“代打”了

上周帮朋友改一个图库页，他一脸疲惫地发来截图：“用 Masonry 写了三天，换设备就错位，响应式一加全乱套。”我点开控制台，发现 grid-gap 被 JS 动态计算覆盖了两次，而真正的问题——其实是他根本没试过纯 CSS 的 column-count 方案。

瀑布流常被默认等同于“JS 驱动的动态列高对齐”，但现实是：多数内容型瀑布流（如文章卡片、商品缩略图、摄影作品集）根本不需要 JS 参与。浏览器原生支持早就在那儿了，只是我们习惯性绕开了它。

为什么 column-* 是更轻、更稳的选择？

很多人一想到瀑布流，脑海里立刻跳出 Masonry、Isotope 这类库——它们确实强大，能处理不规则高度、拖拽重排、动画过渡。但代价也很实在：

• 每次 DOM 变化都要触发 JS 重排计算；
• 图片加载完成前，JS 往往按占位符高度布局，导致“闪跳”；
• 响应式断点切换时，列数变更需手动监听 + 重计算，稍有疏漏就卡顿。

而 column-count + break-inside: avoid 的组合，是浏览器原生的分栏机制，它不关心子元素多高，只按内容流自然折行。就像报纸排版——你不会给每段文字写个高度校准脚本，对吧？

关键代码就三行：

.waterfall {
  column-count: 3;
  column-gap: 1.5rem;
}
.waterfall > * {
  break-inside: avoid;
}

break-inside: avoid 是核心中的核心——它阻止卡片在列内被截断。没有这句，标题在第一列、图片跑到第二列，体验直接崩掉。

实际踩坑：gap 不生效？图片撑不开列宽？

刚用上的人常遇到两个“咦？”时刻：

第一，“gap 怎么没间距？”
因为 column-gap 对 flex 或 grid 无效，它只作用于 column-* 布局。如果你误把 .waterfall 设成了 display: flex，那 gap 就是摆设。确认 display 值是 column 相关（或未设置，默认 block）。

第二，“图片宽度超出了列宽！”
这是经典陷阱：img 默认是 inline 元素，在多列中会继承父容器的 column-width 行为，但若没约束最大宽度，它可能撑破当前列。解法简单粗暴：

.waterfall img {
  max-width: 100%;
  height: auto;
}

顺便说一句：别用 width: 100%。它会让图片强行拉伸填满列宽，失真风险高；max-width 才是安全带。

响应式不是“加个 media query”就完事

列数不能死守 3 列。小屏塞三列，字小得眯眼；大屏还三列，留白多到寂寞。但直接写 @media (max-width: 768px) { column-count: 1; } 会带来新问题：从 3 列突变到 1 列，所有卡片瞬间堆成一长条，视觉冲击太强。

更顺滑的做法是：用 column-width 替代 column-count。

.waterfall {
  column-width: 300px; /* 浏览器会自动算该放几列 */
  column-gap: 1.25rem;
}

这样，屏幕缩小时，列宽保持 300px 不变，列数自动减少；放大时，列数渐进增加。视觉节奏始终可控，且无需手写一堆断点。实测在 iPad、折叠屏、4K 显示器上都表现稳定。

当真需要“JS 瀑布流”时，什么场景绕不开？

坦白讲，column-* 不是万能钥匙。以下情况，老老实实上 JS 更靠谱：

• 卡片高度差异极大（比如混排短摘要和长测评）；
• 要求严格左对齐（column-* 天然右边缘参差）；
• 需要无限滚动 + 动态插入新项，且插入后旧卡片位置不能偏移；
• 交互要求高：拖拽排序、点击展开、悬停放大等。

但注意：这些需求本质已超出“布局”范畴，进入“状态管理”领域。此时选 Masonry 或 CSS Grid + JS 计算，是合理的技术权衡，而非“CSS 不够用”。

最后一点实在建议：从“最小可运行”开始

别一上来就搞复杂响应式+暗色模式+加载骨架。先写一个 5 张卡片的 HTML，加上上面那 4 行 CSS，在 Chrome 和 Safari 里打开，拖动窗口看列数变化。确认图片不溢出、文字不断行、间隙均匀——这就成功了一半。

真正的难点从来不在代码，而在判断：这个页面，用户到底是在快速扫图，还是逐张细读？
前者适合 column-* 的流畅滚动；后者可能需要 grid + grid-auto-flow: dense 配合显式高度控制。

技术没有高低，只有是否贴合当下那一屏、那一秒的真实需求。

瀑布流不是炫技的靶子，它是内容呼吸的节奏。
把节奏交还给浏览器，有时比攥紧 JS 控制权，更接近设计本意。