纯CSS无法实现真正瀑布流，因column-count仅机械折行且不支持按最短列分配元素；display:masonry受限于浏览器兼容性与布局约束；需JS维护列高数组并动态定位元素。
纯 CSS 无法真正实现动态、响应式的多列瀑布流布局——column-count 只能按高度切分内容流，不支持“每列独立滚动+元素按顺序填入最短列”的行为；真实瀑布流必须依赖 JavaScript 控制 DOM 插入顺序和位置。
为什么 column-count 不是真正的瀑布流
它把一个块级容器当成“单一流”，按指定列数机械折行，所有子元素仍按文档流顺序排列，无法做到：第 5 个元素自动落到当前最短列底部、图片加载后列高重排、或响应式列数变化时重新分配元素。
- 元素不能跨列定位，
break-inside: avoid仅防断行，不解决列高不均 - 图片异步加载会导致列高错乱，无回调机制触发重排
- 无法监听列高变化，
ResizeObserver对 column 容器无效
用 Masonry（CSS display: masonry）的现状与限制
Chrome 116+ 支持 display: masonry，但目前仅限一维布局（必须指定 grid-template-rows 或 grid-template-columns），且不兼容 Safari / Firefox。实际项目中不可直接落地。
- 需配合
grid-template-rows: masonry+grid-auto-flow: column使用 - 父容器必须设固定宽高或显式约束，否则渲染失败
- 无法与
flex或常规grid混用，响应式切换列数需 JS 配合媒体查询监听
轻量 JS 实现核心逻辑（基于高度排序插入）
核心就三步：维护列高数组 → 找最小高度索引 → 给元素设 position: absolute + top/left。无需框架，20 行内可跑通。
立即学习“前端免费学习笔记（深入）”；
const container = document.querySelector('.masonry');
const items = Array.from(container.children);
const cols = 3;
const colHeights = Array(cols).fill(0);
const gap = 16;
items.forEach(item => {
const minHeight = Math.min(...colHeights);
const minIndex = colHeights.indexOf(minHeight);
item.style.position = 'absolute';
item.style.left = ${minIndex * (container.offsetWidth / cols) + minIndex * gap}px;
item.style.top = ${minHeight + gap}px;
colHeights[minIndex] += item.offsetHeight + gap;
});
container.style.height = ${Math.max(...colHeights)}px;
- 列宽用
container.offsetWidth / cols计算，避免百分比累积误差 -
gap要在top和colHeights累加时都体现，否则首行错位 - 图片未加载完成时
offsetHeight为 0，需监听load后调用重排函数
响应式与图片加载的两个关键补丁
列数随屏幕变化、图片异步加载，这两点不处理，瀑布流必崩。
- 用
window.matchMedia监听(min-width: 768px)等断点，触发后清空colHeights并重排全部元素 - 对每个
onload，执行该图片所在元素的offsetHeight更新 + 对应列高重算 + 后续元素位置批量修正 - 避免频繁重排：用
requestAnimationFrame聚合多次更新，再统一应用样式
真正难的不是第一屏布局，而是后续无限滚动中持续维护列高状态、处理图片加载抖动、以及 Safari 下 getBoundingClientRect() 偶发返回 0 的边界情况——这些细节没兜住，用户就会看到元素叠在一起或者突然跳变。
