图片加载后需重排以避免瀑布流错位，因CSS布局计算早于图片加载完成；应通过img.onload或naturalWidth>0判断加载就绪，结合data-loaded标记、requestIdleCallback及批量处理优化重排时机与性能。
图片加载后不重绘，瀑布流就错位
纯 CSS 的 column-count 或 grid-auto-flow: dense 都不会感知图片加载完成——浏览器按初始占位（通常是 0 高）切分列或排列网格，等图片真实高度撑开后，整个布局就塌了、跳了、错行了。这不是 bug，是机制使然：CSS 布局计算发生在 DOM 渲染早期，而图片加载是异步的。
必须等 naturalWidth > 0 再触发重排
靠 img.onload 最稳妥，但要注意它只在图片成功加载时触发；naturalWidth > 0 是更底层的判断，能覆盖缓存图、base64 图等场景。别用 img.complete，它在懒加载下可能为 true 但尺寸未就绪。
- 对每张
img绑定onload，加载完立即调用重排逻辑 - 若用 IntersectionObserver 预加载，需在回调里加
if (img.naturalWidth > 0)双重校验 - 重排方式取决于你用的方案：
–column-count：改article.style.columnCount = article.style.columnCount（触发强制重排）
–display: grid：改container.style.gridTemplateColumns = container.style.gridTemplateColumns
– Masonry 库：调masonry.layout()
懒加载 + 重排容易重复触发
滚动快时，一张图可能被多次监听到进入视口，onload 和 IntersectionObserver 又不同步，导致同一张图触发多次重排，卡顿明显。
- 给每张
img加data-loaded="true"标记，重排前先检查 - 用
requestIdleCallback包裹重排调用，避免阻塞主线程 - 批量处理：收集 3–5 张加载完成的图，再统一重排一次，比单张触发更高效
骨架占位没高度，重排也白搭
如果骨架只是个空 div，没设 padding-bottom 或 aspect-ratio，图片加载前容器高度为 0，重排时仍要从头计算所有列高，抖动更剧烈。
立即学习“前端免费学习笔记（深入）”；
- 服务端能返回宽高，就在 HTML 中写死
width和height属性 - 客户端生成 DOM 前，用
new Image().src = url预读尺寸，再渲染带aspect-ratio的占位元素 - 骨架容器必须有可预测高度：比如
padding-bottom: 66.67%（对应 3:2 图），不能只靠min-height
