移动端瀑布流应以grid+auto-fill为基础布局，设minmax(280px,1fr)、aspect-ratio防塌陷、gap控间距；iOS Safari需加-webkit-overflow-scrolling:touch、min-height:1px及position:relative规避事件失灵；图片闪跳须用aspect-ratio或伪元素回退，强对齐需求才引入JS。
移动端瀑布流不能只靠 column-count 或纯 grid 一招鲜，iOS Safari 和 Android Chrome 对滚动、定位、事件区域的处理差异太大，必须分层应对。
用 grid + auto-fill 做基础布局（不依赖列高对齐）
这是目前最稳的起点：不追求每列底部严格对齐，但保证卡片不被截断、不闪跳、响应式自然。关键不是“模拟瀑布”，而是让内容按高度自然堆叠出视觉瀑布感。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 最小宽度适配手机竖屏视频/图卡，1fr让大屏自动均分 - 每张卡片必须设
aspect-ratio: 9/16或aspect-ratio: 4/3，防止图片加载前高度为 0 导致塌陷 - 用
gap控制间距，别用margin，否则 Grid 可能误判列数 - 禁用
grid-auto-rows，让行高由卡片内容撑开；若需统一最小高度，加min-height: 200px到卡片上
解决 iOS Safari 点击失灵和滚动卡顿
iOS Safari 在 overflow: auto 容器里对绝对定位子元素、零高度卡片的事件区域识别极差，不是 CSS 能单点修复的。
- 给瀑布流容器加
-webkit-overflow-scrolling: touch（仅旧版 iOS 需要，iOS 16.4+ 已弃用但部分企业内网仍需兼容） - 每张卡片必须有明确的
min-height: 1px（哪怕只是占位），否则 Safari 可能优化掉整个事件区域 - 卡片内如有
position: absolute的 badge、播放按钮等，其父级卡片必须设position: relative - 避免在容器上设
overflow: hidden，否则跨列卡片（如 span 多列的标题）会被截断
图片/视频加载导致的闪跳与错位
移动端网络波动大，图片异步加载时高度突变，是瀑布流“抖动”的主因，CSS 无法预测，必须预留空间。
- 所有卡片用
aspect-ratio（Chrome/Edge/Firefox/Safari 15.4+ 支持），不支持的旧 Safari 用伪元素 +padding-bottom回退 -
column-count下break-inside: avoid失效 - 视频卡片加
poster属性，且src延迟加载（如用data-src+ IntersectionObserver 触发），避免上百个同时请求带宽打满 - 慎用
loading="lazy"—— 它和瀑布流重排冲突，除非配合IntersectionObserver手动触发layout.appended()
什么时候必须上 JS（masonry-layout）
只有当业务强要求“每列底部严格对齐”（如电商比价页、商品价格横向可扫视），且不能接受视觉错位时，才引入 JS。否则纯 CSS 方案更轻、更稳、首屏更快。
- 初始化前确保 DOM 就绪：
document.addEventListener('DOMContentLoaded', ...)，别在里直接执行 - 图片未加载完时
getBoundingClientRect()返回height: 0，必须监听img.onload或用imagesLoaded插件 - 动态添加新卡片后，调
layout.appended(newItems)，别用layout.reloadItems()（性能差、全量重排） - 如果父容器有
transform或filter，masonry-layout默认的position: relative会偏移，需手动重置containerStyle.position = 'static'
真正难的不是写几行 grid，而是判断哪一层该用 CSS 解决、哪一层必须交由 JS 控制高度——尤其在 iOS 上，一个没设 min-height 的卡片，就可能让整个点击交互失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
