css grid实现瀑布流最省事，但需避开safari兼容问题：推荐用grid-auto-flow: row配合auto-fill；若需列高对齐则用grid-auto-flow: column并加@supports回退column-count；column-count易闪跳，须配aspect-ratio容器；js仅在必须精确对齐时采用masonry-layout库。
瀑布流用 CSS Grid 最省事，但得避开 Safari 的兼容坑
现代瀑布流布局，display: grid 配合 grid-template-columns 和 grid-auto-flow: dense 是最简洁可靠的方案，不用 JS、不依赖第三方库。但 Safari（尤其 iOS 16.4 之前）对 grid-auto-flow: column 支持不全，强行用会错行或重叠。
- 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))+grid-auto-flow: row（靠内容高度自然形成“视觉瀑布”，非严格列高对齐，但稳定） - 真要列高对齐（比如电商商品卡），必须用
grid-auto-flow: column，此时需加@supports (grid-auto-flow: column)包裹，并给 Safari 提供column-count回退方案 - 别忘了设
gap控制间距，且避免在子项上设margin——Grid 会把它算进尺寸，导致列数意外减少
用 column-count 做兼容 fallback，但图片加载会闪跳
column-count 是最老但最广的瀑布流方案，IE10+、所有移动端浏览器都支持。问题在于它把内容当纯文本流切分，图片加载慢时高度为 0，导致后续内容提前“掉”进下一列，等图加载完才重排，肉眼可见闪跳。
- 解决闪跳：给所有图片加固定宽高比容器，例如用
aspect-ratio: 4/3或伪元素 + padding-bottom 技巧 - 避免子元素撑破列宽：给直接子项设
break-inside: avoid，否则卡片可能被硬生生从中间劈开 - 列间距只能用
column-gap，不能用gap；且无法控制某一项强制起新列（不像 Grid 可用grid-column: 1 / -1）
JS 实现（Masonry）只在必须精确列高对齐时才考虑
纯 CSS 方案无法让每列底部严格对齐（尤其卡片高度差异大时），这时才轮到 JS。但别自己手写 Masonry 算法——性能差、resize 事件处理易漏、响应式更新不及时。
- 用
masonry-layout（原生 CSScontainer-type: layout还没普及，此库是当前最轻量靠谱的选择） - 初始化前确保所有图片已加载，否则高度计算错误；可用
img.onload或loading="lazy"+IntersectionObserver触发重排 - 监听窗口 resize 时别直接调
masonry.layout()，加debounce（300ms），否则滚动时频繁重排卡顿
响应式断点里 column-count 和 grid 别混用
同一组件在不同屏幕宽度下切换布局模式时，最容易出错的是「CSS 层叠顺序」和「height 计算逻辑」冲突。比如 PC 用 grid，移动端切 column-count，但没清除旧的 grid-* 属性，Safari 就会渲染异常。
- 推荐做法：用独立 class 控制模式，如
.masonry-grid和.masonry-columns，媒体查询里完整覆盖整套规则，不依赖继承 - 别在同一个选择器里同时写
grid-template-columns和column-count——浏览器按声明顺序解析，后者可能被忽略或触发未定义行为 - 测试时重点看 iPhone 上横竖屏切换瞬间，很多 bug 只在这个时机暴露
瀑布流看着简单，真正上线前至少要在 iOS Safari、Chrome Android、Edge Win 三种环境跑一遍真实图片加载流程。列高对齐不是刚需时，优先用 Grid + auto-fill；需要精确对齐又不想引 JS，就老老实实用 column-count + aspect-ratio 容器——省下的调试时间远大于多写几行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
