如何实现一个瀑布流布局？

瀑布流布局（Masonry Layout）是一种多列动态排列内容的响应式设计技术，以下通过 CSS 和 JavaScript 两种方式实现：

1. 纯 CSS 实现

方法一：使用 column-count

.waterfall {
  column-count: 3;        /* 设置列数 */
  column-gap: 20px;       /* 列间距 */
}
.item {
  display: inline-block;  /* 防止内容跨列断裂 */
  width: 100%;
  margin-bottom: 20px;
}

方法二：使用 Flexbox 布局

<div class="waterfall">
  <div class="column"> <div class="item">...</div> <!-- 奇数内容 --> </div>
  <div class="column"> <div class="item">...</div> <!-- 偶数内容 --> </div>
</div>

.waterfall {
  display: flex;
  gap: 20px;
}
.column {
  flex: 1; /* 每列等宽 */
}

缺点：CSS 无法动态计算最矮列，可能导致内容间隙不平衡。

2. JavaScript 实现（主流方法）

核心原理：

1. 计算列数：根据父容器宽度和子元素宽度 + 间隙计算。
2. 更新最小高度列：记录每列的高度数组，遍历每个元素：
   • 找到数组中高度最小的列索引 minIndex
   • 放置元素到此列位置
   • 更新该列的高度： 列高 += 当前元素高 + 垂直间隙

原生 JavaScript 代码示例：

function waterfallLayout(parentSelector, childSelector, gap = 20) {
  const parent = document.querySelector(parentSelector);
  const children = Array.from(parent.querySelectorAll(childSelector));
  
  // 初始化容器为相对定位
  parent.style.position = "relative";

  // 获取布局参数
  const itemWidth = children.offsetWidth;
  const containerWidth = parent.offsetWidth;
  const cols = Math.floor((containerWidth + gap) / (itemWidth + gap));
  
  // 初始化列高数组（全为0）
  const heightArr = new Array(cols).fill(0);

  // 遍历元素进行定位
  children.forEach(item => {
    item.style.position = "absolute";
    const minHeight = Math.min(...heightArr);           // 获取当前最矮列高度
    const minIndex = heightArr.indexOf(minHeight);       // 记录最矮列的索引
    
    // 设置元素位置：左=索引×(宽度+间隙)，顶=最矮列高度
    item.style.left = minIndex * (itemWidth + gap) + "px";
    item.style.top = minHeight + "px";
    
    // 更新列高
    heightArr[minIndex] += item.offsetHeight + gap;
  });

  // 设置父容器高度（保证滚动加载可用）
  parent.style.height = Math.max(...heightArr) + "px";
}

3. 扩展实践

• 动态加载：监听 scroll 事件，当滚动条位置 (scrollTop + 窗口高度) > 页面高度 时追加新元素。
• 框架集成：Vue/React 可结合框架逻辑（如 nextTick）动态计算列高度。
• 优化渲染：绑定 resize 事件重新布局；使用 requestAnimationFrame 优化性能。

建议场景

• CSS 方案适用于简单静态布局，无需 JS 动态计算。
• JavaScript 方案灵活性更高，能完美实现高度适配效果（优先推荐）。