css3瀑布流效果不等高

CSS3瀑布流效果是一种让网站排版更加美观和灵活的方法。它可以让元素不等高地展示在页面上，类似于瀑布流的效果。

// html部分
<div class="waterfall">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// css部分
.waterfall {
  column-count: 3;
  column-gap: 20px;
}

.item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
}

在上面的代码中，我们使用了CSS3的column-count属性来定义了三列，column-gap属性来定义了列之间的距离。然后我们通过给每个元素设置display为inline-block、width为100%、margin-bottom为20px来让它们占据一整列并且在下方留出20像素的空间。

这种宽度自适应的方式可以让我们在线性布局的基础上增加了一定的灵活性。不过需要注意的是，如果我们有一些高度过大的元素，可能会影响整个布局。因此在实现瀑布流效果时，需要根据实际情况进行设计。

CSS3瀑布流效果通过简单的CSS属性就可以实现，使我们不必依赖于JavaScript或者jQuery等库。这也是它得到广泛应用的原因之一。除了以上的代码，我们还可以通过其他方式来对瀑布流进行细节的调整，例如利用CSS3的transform或者transition属性来实现动画效果。