# CSS 实现瀑布流布局

瀑布流布局是一种流行的布局方式，通常用于展示图片或卡片等元素。以下是几种用CSS实现瀑布流布局的方法。

使用CSS列（Column）

CSS列是实现瀑布流最简单的方式之一。

HTML结构：

<div class="waterfall">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多项 -->
</div>

CSS样式：

.waterfall {
  column-count: 3;
  column-gap: 16px;
}

.item {
  background-color: #f1f1f1;
  margin-bottom: 16px;
  break-inside: avoid;
}

使用Flexbox

Flexbox也可以用于实现瀑布流，但需要一些额外的JavaScript来均匀地分配项目。

HTML结构：

<div class="waterfall">
  <div class="column">
    <div class="item">Item 1</div>
    <!-- 更多项 -->
  </div>
  <div class="column">
    <div class="item">Item 2</div>
    <!-- 更多项 -->
  </div>
  <!-- 更多列 -->
</div>

CSS样式：

.waterfall {
  display: flex;
}

.column {
  flex: 1;
}

.item {
  background-color: #f1f1f1;
  margin-bottom: 16px;
}

使用Grid布局

CSS Grid也是一个非常强大的布局系统，可以用来实现瀑布流。

HTML结构：

<div class="waterfall">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多项 -->
</div>

CSS样式：

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

.item {
  background-color: #f1f1f1;
}

这只是几种实现瀑布流布局的方式。实际项目中，你可能还需要加入更多的样式和交互。你可以根据具体需求，选择最适合你的方法。