瀑布流布局核心原理

瀑布流（Masonry / Waterfall）布局的核心特征是：固定列数，但每一列的行高由内容高度动态决定。项目按从上到下、从左到右的顺序依次排列，后一个项目自动插入当前高度最小的列底部，形成参差交错、无空白间隙的视觉流。这种布局在图片分享、电商商品、卡片资讯类页面中广泛应用。

1.1 固定列数与动态行高

• 固定列数：在布局初始化时确定列的数量（如 2 列、3 列），列宽等分容器宽度，不随内容变化。
• 动态行高：每个项目的高度由其内容（文字、图片、padding）决定，非固定值。项目依次落入当前最短列，使得整体高度差最小。
• 这种“换行”逻辑不同于常规流式布局（从左到右，换行到下一行），后者会留下大量底部空白。

1.2 CSS 列布局 vs 定位布局

实现瀑布流主要有两种前端技术路线：基于 CSS 多列（column）布局和基于 JavaScript 的定位（absolute）布局。下表展示它们的差异：

1.3 LazyGrid 的虚拟化机制优势

传统定位瀑布流在滚动大量项目（超过 1000 项）时，会持续创建和销毁 DOM 节点，导致内存膨胀和绘制卡顿。LazyGrid（懒加载网格）是一种虚拟化（Virtualization）方案，只渲染可视区域内的少数项目，滚动时动态回收和复用节点，实现极致性能。

• 可视窗口驱动： 根据滚动偏移量计算当前屏幕应该显示的项目索引，只渲染这些项目。
• 节点回收（Recycling）： 当项目滚出可视区域，其 DOM 节点被移除或替换为新进入的项目，避免不断创建新节点。
• 占位符（Placeholder）： 在非可视区使用轻量占位元素保持滚动条高度，让滚动体验自然。
• 列高度缓存： 维护每列的当前高度数组，当新项目插入时快速定位最短列，时间复杂度 O(1) 或 O(log k)。
• 优势对比：

1.4 核心原理总览

下图统一展示瀑布流布局中固定列数、动态行高的排列过程，CSS 列布局与定位布局的差异，以及 LazyGrid 虚拟化如何只在可视区渲染项目：

1.5 本章小结

瀑布流布局的本质是在固定列数下通过动态行高消除列间空白。CSS 列布局实现简单但有顺序和跨列缺陷，定位布局能精确控制但性能瓶颈明显。LazyGrid 虚拟化通过仅渲染可视区域、节点回收和列高度缓存，将瀑布流从“适合几十项”扩展到“适合几万项”，是高性能瀑布流的前端基石。下一章将深入定位布局的算法实现与优化细节。

/* 一个极简的 CSS 列瀑布流示例（仅供实验，不推荐生产） */
.masonry-css {
  column-count: 3;
  column-gap: 16px;
}
.masonry-css > .item {
  break-inside: avoid;    /* 防止内容被分割到两列 */
  margin-bottom: 16px;
  background: #f0f0f0;
  padding: 12px;
  border-radius: 8px;
}