CSS3如何做瀑布流布局

CSS3 实现瀑布流布局（Masonry Layout）主要有两种主流方案：CSS 多列布局（Multi-column） 和 CSS Grid 布局。下面分别介绍，并给出推荐方案。

一、使用 CSS 多列布局（最简单，但对顺序要求不高）

原理

利用 column-count 将容器分成多列，内容自动向下流动。

示例

<div class="waterfall">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.waterfall {
  column-count: 3;        /* 列数 */
  column-gap: 16px;       /* 列间距 */
}

.item {
  break-inside: avoid;    /* 防止被截断 */
  margin-bottom: 16px;
  background: #4caf50;
  color: #fff;
  padding: 20px;
}

优点

• 实现简单
• 纯 CSS
• 不需要 JS

缺点

• 元素顺序是 纵向排列（先填满第一列，再第二列）
• 不适合“从左到右”的视觉顺序
• 对动态高度支持一般

✅ 适合：图片高度不一、顺序不敏感的场景

二、使用 CSS Grid（推荐，但需固定行高或 JS 辅助）

1️⃣ 基础 Grid（高度一致）

.waterfall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;
  gap: 16px;
}

.item {
  grid-row: span 20; /* 控制高度 */
  background: #2196f3;
}

❌ 问题：

• 高度需要手动计算
• 不适合动态内容

2️⃣ Grid + JS（真实瀑布流，最常用 ✅）

HTML

<div class="waterfall" id="waterfall"></div>

CSS

.waterfall {
  position: relative;
  width: 100%;
}

.item {
  position: absolute;
  width: calc(33.333% - 16px);
}

JS（核心逻辑）

const container = document.getElementById('waterfall');
const items = container.children;
const gap = 16;
const colCount = 3;
const colHeight = new Array(colCount).fill(0);

Array.from(items).forEach(item => {
  const minHeight = Math.min(...colHeight);
  const colIndex = colHeight.indexOf(minHeight);

  item.style.left = colIndex * (100 / colCount) + '%';
  item.style.top = minHeight + 'px';

  colHeight[colIndex] += item.offsetHeight + gap;
});

container.style.height = Math.max(...colHeight) + 'px';

✅ 优点

• 精确实时布局
• 顺序从左到右
• 适合图片、卡片流

❌ 缺点

• 需要 JS

三、对比总结

四、额外建议

• 图片瀑布流：加载完图片后再计算高度
• 响应式：JS 中监听 resize 重新布局
• 性能优化：使用 requestAnimationFrame

如果你愿意，我可以：

• ✅ 写一个 完整图片瀑布流 demo
• ✅ 封装成 Vue / React 组件
• ✅ 对比 CSS Masonry（实验性） 的最新支持情况

你更偏向哪种使用场景？