如何使用CSS构建一个瀑布流布局

要使用CSS构建一个瀑布流布局，您可以使用CSS的column属性或者使用flexbox布局。以下是两种方法的示例代码：

方法1：使用CSS Columns

HTML:

<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:

.waterfall {
  column-count: 3;
  column-gap: 1em;
}
 
.waterfall-item {
  break-inside: avoid;
  margin-bottom: 1em;
}
 
.waterfall-item img {
  width: 100%;
  height: auto;
  display: block;
}

方法2：使用CSS Flexbox

HTML:

<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:

.waterfall {
  display: flex;
  flex-wrap: wrap;
}
 
.waterfall-item {
  flex: 1;
  flex-basis: 100%;
  margin-bottom: 1em;
  margin-right: 1em;
}
 
.waterfall-item:nth-child(3n) {
  margin-right: 0;
}
 
.waterfall-item img {
  width: 100%;
  height: auto;
  display: block;
}

两种方法均可以创建一个瀑布流布局，使得图片按列排列，并且自动流动到下一行。您可以根据实际情况选择其中一种方法实现您的需求。