图片加载导致瀑布流高度抖动的根本原因是浏览器在图片未加载完成时无法获知真实高度，offsetheight等返回占位尺寸，加载后重排引发列高错乱；防抖关键在于html中显式声明img的width和height属性以锁定初始占位空间。
为什么图片加载会导致瀑布流高度计算抖动
根本原因是浏览器在图片未加载完成时无法获知真实高度，offsetHeight 或 getBoundingClientRect() 返回的是占位尺寸（常为 0 或行内默认值），等图片加载完毕触发重排，列高数组错乱，后续元素全部错位下移——这不是动画问题，是布局树被反复修改造成的视觉跳变。
防抖关键：用 HTML 原生属性锁死初始占位
所有 <img> 标签必须显式声明 width 和 height 属性，哪怕只是近似值。浏览器据此推算固有宽高比，首帧即可分配准确空间，避免重排。
-
<img src="a.jpg" style="max-width:90%" style="max-width:90%">→ 即使图片加载慢，容器高度已固定 - 配合 CSS
aspect-ratio: 4/3或object-fit: cover控制缩放，不破坏占位 - 服务端返回图片元数据时，应把宽高写入 HTML 模板，而非靠 JS 异步补全
JS 动态计算阶段如何避免二次抖动
即使 HTML 占位正确，JS 在遍历元素获取 offsetHeight 时仍可能因图片异步加载未就绪而读到错误值。不能依赖 load 事件全局监听——它不可靠且延迟高。
- 对每个
.waterfall-item，优先检查img.naturalWidth > 0，再读offsetHeight - 若
naturalWidth为 0，用img.addEventListener('load', callback, { once: true })回调后重新计算该列 - 避免批量调用
getBoundingClientRect()：它强制同步布局，100 个元素会卡顿；改用offsetHeight+ 缓存 - 列高数组更新必须原子化：先
Math.min(...heights)找最短列，再heights[colIndex] += item.offsetHeight，不可边读边写
响应式重排时的抖动陷阱
窗口 resize 触发重新布局，若直接清空容器再重排，DOM 闪退+重绘会肉眼可见。更稳妥的做法是保留现有结构，仅调整定位样式。
- 用
position: absolute实现定位时，不要innerHTML = ''，而是遍历已有.waterfall-item逐个更新style.left和style.top - resize 节流用
requestAnimationFrame，而非setTimeout：前者与渲染帧同步，避免中间态暴露 - 列数变更（如从 3 列→2 列）时，旧列高数组不能直接复用，需按新列数重新初始化并重分配元素
width 和 height。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
