瀑布流闪烁的根本原因是图片加载前高度为0导致布局重排，解决方法是提前声明占位空间：服务端写死宽高、客户端预读尺寸、CSS强制aspect-ratio、设置grid-auto-rows基准值、避免lazy loading首屏图，并用getBoundingClientRect确保定位后再加载图片。
图片没设宽高时瀑布流必然闪烁
慢速网络下最典型的闪烁，不是字体跳变，而是图片加载前高度为 0、加载后突然撑开导致整列内容上移或错位。浏览器根本不知道这张图该占多高，grid-auto-flow 或 column-count 都会按“空盒子”切分，等图片回来再重排——这就是视觉抖动的根源。
解决路径只有一条：在 DOM 渲染前就告诉浏览器“这个位置必须预留多少空间”。不能靠 JS 算、不能等 onload、更不能指望 loading="lazy" 自己扛。
- 服务端渲染时直接写死
<img src="x.jpg" width="320" height="240">—— Chrome/Firefox 会据此推导aspect-ratio，连 CSS 都不用写 - 客户端动态生成时，先用
URL.createObjectURL()或new Image().src = url预读尺寸，再插入带width/height的<img> - 实在无法预知尺寸（比如 CMS 后台上传未存元信息），用 CSS
aspect-ratio: 4/3强制容器比例，再配img { width: 100%; height: 100%; object-fit: cover; } - 兼容 Safari 15.3 及更早？别用伪元素 padding-bottom 技巧——它依赖父容器
position: relative，而瀑布流容器常是display: grid或columns，会失效；改用包裹一层<div class="img-wrapper">并设aspect-ratio
column-count 在慢网下闪跳的根本原因
column-count 不是布局算法，它只是把内容当纯文本流垂直切片。图片加载慢 → 高度为 0 → 后续内容提前“掉”进下一列 → 图片回来 → 整列重排 → 肉眼可见跳动。这不是 bug，是设计使然。
想让它不闪，光加 break-inside: avoid 不够，必须让每一列的“起始高度可预测”。
立即学习“前端免费学习笔记（深入）”；
- 所有
.item必须有明确的最小高度（哪怕只是min-height: 200px），防止塌陷 -
column-gap必须用固定值（如1rem），禁用百分比（如5%）——否则 resize 或字体加载完成时会触发额外 layout - 不要给
.item设margin控制间距，用column-gap；margin 会被算进列宽，导致列数意外减少 - 首屏图片绝对不要用
loading="lazy"，它会让占位时机进一步延后，放大闪烁风险
Grid 瀑布流中 grid-auto-rows 的真实作用
很多人以为 grid-auto-rows: 10px 是设 item 最小高度，其实它只是给 Grid 容器一个“行高基准”，让 grid-auto-flow: dense 知道怎么分配跨行空间。值本身无关紧要，但缺了它，高度不一的 item 就没法自动撑开对应行数。
慢网下这个值还承担着“占位锚点”的隐性任务：只要容器有明确的行高基准，浏览器就能在图片加载前预留出大致空间，减少重排幅度。
- 设成
grid-auto-rows: 1fr没用——它只对显式定义的行有效，对 auto-flow 不生效 - 设成
grid-auto-rows: 0也不行——Grid 会拒绝生成行，item 全挤第一行 - 推荐值：10px～50px 之间任选，配合
gap使用；太大会浪费空白，太小可能导致短 item 被压缩 - 如果 item 内部有文字，记得加
line-height约束基线，否则字体加载延迟也会引发微抖
IntersectionObserver 懒加载必须配合 getBoundingClientRect
在瀑布流里用 IntersectionObserver 加载图片时，如果一进入视口就立刻赋值 src，浏览器还没来得及计算这张图该落在哪一列，就会先塞进第一列、再跳到目标列——这就是“先挤后跳”的典型闪烁。
真正可靠的时机，不是“是否可见”，而是“是否已知位置”。
- 在 observer 回调里，先调
element.getBoundingClientRect()，确认元素已在文档流中定位完毕，再设置img.src - 或者用
requestIdleCallback延迟赋值，避开渲染关键帧 - 千万别在
scroll事件里手动触发masonry.layout()或强制getComputedStyle——这会直接触发 layout thrashing - 如果用了
masonry-layout库，初始化前确保所有首屏图片已加载（可用img.onload聚合），否则列高计算全错
aspect-ratio、grid-auto-rows 这些看似静态的配置，才是对抗闪烁的第一道防线。JS 只负责补漏，不该承担占位主责。 
