绝对定位实现瀑布流必须给容器设 position: relative 作为定位锚点，否则卡片会相对于视口左上角堆叠；js 需动态计算列高并监听图片加载确保尺寸准确，css 的 grid 属性在此方案中无效。
绝对定位做瀑布流，不是“加个 position: absolute 就完事”，而是必须配合 JS 动态计算列高、并给容器设 position: relative——否则所有卡片全飞到页面左上角。
为什么 position: absolute 卡片会堆在左上角或飘走？
因为没给父容器设 position: relative。position: absolute 的元素默认往上找第一个已定位祖先（relative/absolute/fixed），找不到就落到 ，最终相对于视口定位。
- 常见错误现象：
top: 100px写了，但所有卡片仍挤在(0, 0)；滚动时卡片位置“漂移”甚至消失 - 必须加：
.waterfall { position: relative; }，这是绝对定位瀑布流的强制前提 - 别用
position: static或不写——它等价于没设，起不到锚点作用
JS 计算列高时，offsetTop + offsetHeight 才是可靠依据
不能靠 CSS 硬写 top: 200px，因为图片加载后高度会变，所有后续 top 值立刻错位。JS 必须读取真实 DOM 尺寸。
- 初始化列高数组：
const columnHeights = [0, 0, 0]; // 三列 - 对每个卡片：
const minHeight = Math.min(...columnHeights);找最短列 - 定位前先读：
const top = columnHeights[index];，再更新：columnHeights[index] += card.offsetHeight + gap; - 务必等图片加载完成后再计算——监听
img.onload或用IntersectionObserver防闪跳
grid-auto-rows: minmax(100px, auto) 不是 Grid 方案，别混进绝对定位里
这是 Grid 布局的配置项，和绝对定位无关。硬塞进去不会生效，还可能干扰样式优先级。
- 绝对定位下，行高由 JS 计算决定，CSS 的
grid-系列属性完全无效 - 如果同时写了 Grid 和绝对定位，浏览器会按层叠规则丢弃部分声明，行为不可预测
- 想用 Grid 就彻底放弃 JS 定位逻辑，改用
display: grid+auto-fill+minmax() - 绝对定位方案里唯一该关注的 CSS 是：
left、top、width、margin，其余布局属性尽量精简
真正难的不是循环算 top，而是图片加载异步性带来的高度不确定性——哪怕只漏掉一张图的 onload 监听，整列卡片就会塌下去一截，且无法自动恢复。这点在滚动加载场景里尤其致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
