CSS column布局是兼容性好、代码简洁、无需JS的瀑布流实用方案，通过column-count/column-width分列并自动平衡列高实现错落效果，适用于图片墙等静态内容展示。
用 CSS 的 column 布局模拟瀑布流，是目前兼容性好、代码简洁、无需 JS 的实用方案。它虽不是真正意义上的“每列独立滚动”的瀑布流（如 Masonry），但在多数内容展示场景（如图片墙、卡片列表）中视觉效果足够接近，且稳定可控。
column 布局实现瀑布流的核心思路
利用 column-count 或 column-width 将容器划分为多列，子元素按文档流自然“填入”各列，浏览器自动平衡列高 —— 这就形成了类似瀑布流的错落排布。
- 子元素必须是块级、不浮动、不绝对定位（否则会脱离列流）
- 避免给子元素设置
break-inside: avoid（除非你明确想阻止断行，但会破坏列平衡） - 容器需设置
column-gap控制列间距，替代传统 margin
基础写法示例（4 列响应式）
以下代码可直接复用，适配 PC 和平板：
.masonry-column {
column-count: 4;
column-gap: 16px;
}
.masonry-column > * {
break-inside: avoid;
margin-bottom: 16px; /* 注意：这里只控制项底部留白，列间隙由 column-gap 管 */
}
@media (max-width: 768px) {
.masonry-column {
column-count: 2;
}
}
@media (max-width: 480px) {
.masonry-column {
column-count: 1;
}
}常见问题与应对技巧
图片高度不一致导致列高严重失衡？
确保图片有固定宽高比（如用 aspect-ratio 或 padding-top 媒体占位），或设置 img { display: block; width: 100%; height: auto; } 防止溢出拉伸列。
立即学习“前端免费学习笔记（深入）”；
首项被截断、文字断行异常？
给子元素加 break-inside: avoid（已写在示例中），但注意：若内容过长且列数少，可能造成底部大片空白 —— 此时可微调 column-width 替代 column-count，让浏览器自动决定列数。
需要点击区域完整、不被列切割？
确保交互元素（如卡片）是单个 DOM 节点，不要把链接和标题拆到不同元素再强行拼接 —— column 布局对碎片化结构不友好。
和 JS 瀑布流（如 Masonry）对比怎么看？
column 方案胜在轻量、无依赖、SEO 友好、回滚安全；缺点是无法精确控制某一项落在哪一列，也不支持拖拽重排或动态增删后自动重平衡（需触发重绘，如修改 column-count 强制刷新）。
如果你的业务不需要实时交互、内容静态或低频更新，column 布局就是更稳更快的选择。真要动态加载 + 无限滚动？可配合简单 JS 监听加载完成，然后对容器临时设 column-count: 0 再设回原值，触发重排。
基本上就这些 —— 不复杂，但容易忽略细节。
