瀑布流布局核心是视觉错落、空间紧凑、响应自然；推荐css grid模拟（现代项目）或masonry-layout库（生产环境），慎用column-count；图片加载塌陷需通过aspect-ratio或padding-top占位解决。
让图片在页面中以瀑布流方式排列，核心是实现“视觉错落、空间紧凑、响应自然”，而不是简单分栏。目前没有纯 CSS 能在所有浏览器中完美模拟 Pinterest 式“最短列优先”的效果，但有几种实用且主流的方案可选，关键看你的兼容性要求和内容动态性。
用 CSS Grid 模拟（推荐现代项目）
这是当前最平衡的方案：语义清晰、无需 JS、支持响应式列数变化，虽非原生 Masonry，但通过合理配置能逼近真实效果。
- 容器设为
display: grid，用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))自动适配列数（小屏 1 列，中屏 2 列，大屏 3+ 列） - 必须加
grid-auto-flow: dense，否则高图下方会留大片空白 - 设
grid-auto-rows: 10px（值本身不重要，仅作行高基准），让不同高度图片自动跨多行 - 每张图需有明确高度预期——用
aspect-ratio: 4/3（现代浏览器）或 padding-top 占位法（兼容旧版）防加载塌陷 - 避免
overflow: hidden在容器上，否则跨行元素可能被截断
用 JavaScript 库快速落地（推荐生产环境）
如果你需要严格按最短列插入、支持动态加载、图片尺寸差异大，或需兼容 Safari / Firefox 等非 Chrome 浏览器，JS 方案更稳。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 引入
masonry-layout（v4.2.2+），它基于绝对定位 + 高度计算，全浏览器兼容 - 容器需设
position: relative；每个图片项要有明确高度（不能依赖height: auto且图片未加载完） - 初始化前确保 DOM 就绪，且图片至少预留宽高比（
aspect-ratio或data-aspect-ratio） - 新增图片时调用
layout.appended(newItems)，别用reloadItems()（性能差） - 滚动加载或 resize 时，用
IntersectionObserver或节流函数触发重排，避免高频计算
慎用 column-count（仅限简单静态页）
它只是多栏流，不是真瀑布流——DOM 顺序与视觉顺序错位，影响 SEO 和可访问性，只适合后台管理页等低要求场景。
- 写法简单：
column-count: 3; column-gap: 1rem;，子项加break-inside: avoid - 问题明显：第 1 张图永远在第 1 列顶部，第 4 张图在第 2 列顶部，而非第 1 列底部 → 违反直觉
- 图片加载前高度为 0，会导致错位；Chrome 下
<img>默认 inline，底部留白需设display: block - 响应式切换列数需 JS 监听
resize并手动改style.columnCount，CSS 媒体查询对它支持差
图片加载塌陷是共性难点
无论用哪种方案，图片异步加载导致的高度突变都会引发布局跳动。解决重点不在“等图加载完再渲染”，而在“提前占位”：
- 服务端返回图片宽高，前端用
aspect-ratio: ${w}/${h}直接生效 - 不支持
aspect-ratio时，在<img>外包一层容器，设padding-top: calc(${h}/${w} * 100%)+position: relative，再把图片position: absolute铺满 - 禁用全局
img { height: auto }类规则，防止父容器高度坍缩 - 懒加载（
loading="lazy"）可保留，但必须配合占位，否则首屏滚动会明显跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
