绝对定位前必须给父容器设 position: relative，否则子元素会相对于视口定位；top/left 需 JS 动态计算列高，图片加载完成后再读 offsetHeight，否则高度误判导致错位。
绝对定位前必须设 position: relative 到容器
卡片飞出容器、全堆在左上角、滚动时“飘走”，90% 是因为忘了给父容器加 position: relative。position: absolute 的元素默认向上找第一个已定位祖先（relative/absolute/fixed），找不到就落到 ，最终相对于视口定位——这不是你想要的“占位”，而是失控。
务必确认：.waterfall 或你的容器元素有且仅有这一行声明：
.waterfall {
position: relative;
}别用 static（默认值）或不写，也别只给子项设 absolute 就以为完事了。
top 和 left 不能硬编码，得靠 JS 动态算
写死 top: 200px 看似省事，但图片加载后高度变化，后续所有卡片位置立刻错乱。真正可靠的依据是前一张同列卡片的底部位置：offsetTop + offsetHeight + gap。
立即学习“前端免费学习笔记（深入）”；
- 维护一个数组，例如
colHeights = [0, 0, 0]，存每列当前总高度 - 遍历每个
<div class="item">，取 <code>colHeights最小值索引作为目标列 - 设置
item.style.left = colIndex * colWidth + 'px' - 设置
item.style.top = colHeights[colIndex] + 'px' - 更新
colHeights[colIndex] += item.offsetHeight - 容器高度不会随
absolute子项撑开，需手动设min-height或 JS 更新容器height - 滚动触底判断（如无限加载）失效，因为容器高度不准
- SEO 和可访问性受损，屏幕阅读器可能跳过这些脱离流的节点
- 响应式重排必须重新触发整套 JS 计算，resize 事件里不做节流极易卡顿
- 给图片加
height属性或aspect-ratio，配合object-fit: cover保证渲染即占位 - 延迟计算：监听每张图片的
load事件，或用IntersectionObserver+img.decode()确保尺寸就绪后再调用定位逻辑
注意：必须等图片加载完成（监听 load 或用 img.naturalHeight）再读 offsetHeight，否则拿到的是 0 或占位图高度。
为什么纯 CSS 无法用 absolute 实现“自动占位”
absolute 天然脱离文档流，浏览器不会为它预留空间，也就谈不上“占位”。所谓“占位效果”，本质是让后续内容知道“这里已经有一块区域被占了”，而 absolute 元素对兄弟元素的布局毫无影响。
这意味着：
如果你真需要“占位”，column-count + break-inside: avoid 才是唯一原生支持的方案；absolute 只负责“摆位置”，不负责“留空”。
图片未加载完成时的高度误判是最大陷阱
JS 计算位置时若直接读 item.offsetHeight，而图片还没加载完，就会拿到错误值（常见为 0、16px 或 placeholder 高度），导致后续所有卡片下移错位，且无法自动修正。
安全做法只有两种：
别依赖 DOMContentLoaded —— 它不等图片，只等 DOM 解析完成。这点最容易被忽略，也是线上瀑布流首屏错乱的头号原因。
