column-count 仅能模拟瀑布流，非真瀑布流；需设 max-height 触发多列，加 break-inside: avoid 防卡片截断，用 IntersectionObserver 替代 scrollY 实现懒加载。
column-count 能实现视觉上接近瀑布流的效果，但不是“左栏填满再填右栏”的真瀑布流——它按 DOM 顺序切片分栏，列高不均、顺序错位、交互失准是常态。真要用，必须加约束条件，否则上线即翻车。
为什么 column-count 在移动端常显示为单列
根本原因就一个：容器没设 height 或 max-height。浏览器看到“空间无限”，直接退化为 1 列渲染，column-count: 2 形同虚设。
- 必须显式写
max-height: 70vh或具体像素值（比如height: 600px），不能靠父容器撑开 -
min-height不行，它不触发列布局计算 - 如果用
flex布局包裹该容器，且父级没设高度，同样会失效 - iOS Safari 对
column-fill: balance支持不稳定，别依赖它来“拉平”列高
卡片被截断、图片劈成两半的直接原因
没给每个卡片加 break-inside: avoid，或加错了位置——它必须作用在卡片自身（如 .card），而不是容器上。
- 只写
break-inside: avoid不够，iOS 旧版需补前缀：-webkit-column-break-inside: avoid -
page-break-inside: avoid可作兼容兜底，虽已过时但对 iOS 12/Safari 13 仍有用 - 卡片内若含
display: flex或position: absolute子元素，break-inside仍生效；但若卡片自己是absolute，则彻底脱离文档流，该规则失效 - 图片要配
vertical-align: top，否则底部空白会被计入高度，加剧错位
响应式切换列数时的常见崩坏点
仅靠媒体查询改 column-count 值（比如从 3 → 2）容易导致重排错乱、卡片跳位、甚至短暂重复渲染——这不是 CSS 问题，而是浏览器重算列宽和断点时的固有行为。
立即学习“前端免费学习笔记（深入）”；
- 移动端优先：从
column-count: 1起步，往上加（1 → 2 → 3），别反向降级 - 每档断点只动
column-count和column-gap，别碰width或max-width，否则干扰列宽计算 - 横屏旋转时，
column-count不会自动重算——得监听resize事件手动切换，或改用column-width: 300px+min-width组合（列数不可控但更稳） - 图片异步加载完成前高度为 0，列高预估错误，后续卡片全错位；必须用
aspect-ratio或padding-top占位保初始宽高比
懒加载和滚动监听为什么总失效
基于 window.scrollY 的传统方案在 column-count 容器里完全不可用：滚动的是容器，不是文档主体；且 DOM 顺序 ≠ 视觉顺序，scrollIntoView 和锚点跳转都会偏移。
- 必须用
IntersectionObserver，观察目标是每个卡片元素本身，不是父容器 -
rootMargin别设太大负值（如"-200px"），iOS Safari 对负 margin 处理极不稳定 - 建议加
threshold: 0.1，避免卡片刚进视口就触发加载，提升首屏节奏感 - 如果卡片含视频或大图，记得监听
load事件后手动调用observer.observe(item)，防止首次未触发
最常被忽略的其实是“列高不均”这个事实——column-count 从不承诺底部对齐，它只保证列数。想靠 CSS 强行拉齐，只会让布局更脆。接受它的边界，比硬改它更省事。
