CSS怎么实现瀑布流？两种方式介绍

1. 什么是瀑布流

瀑布流布局（Waterfall flow layout）是一种特殊的网页布局方式，通常应用于图片和商品等展示的场景中。其特点是将内容按照一定规则排列在不同的列中，每列宽度相同，但是高度可以不同，就像瀑布一样从上到下流淌。

这种布局方式可以使得页面看起来更加美观和规整，同时有助于提高页面的可视化体验，增加用户的留存时间和转化率。

2. CSS实现瀑布流的两种方式

2.1 利用CSS3的column属性

利用CSS3的column属性可以实现简单的瀑布流布局效果。

首先，需要给容器元素设置columns属性，并指定每列的宽度和间距，如下所示：

.container {
  columns: 3 200px;
  column-gap: 20px;
}

上面的代码表示将容器分成3列，每列宽度为200px，列与列之间的间距为20px。

然后，给容器中的每个子元素设置display属性为inline-block或inline，并将它们的宽度设置为100%。同时，为了使得每个元素高度不一，可以给每个元素设置一个不同的高度值。

.container > div {
  display: inline-block;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}
.container > div:nth-child(2n) {
  height: 250px;
}
.container > div:nth-child(3n) {
  height: 300px;
}

上面的代码表示将容器内的每个子元素设置为块级元素并设置边框、内边距等样式，同时，第2、4、6、8、10个子元素的高度为200px，第3、6、9个子元素的高度为250px，第4、8、12个子元素的高度为300px。

最后，还需要为容器添加一些样式，如清除浮动、设置宽度等：

.container:after {
  content: "";
  display: block;
  clear: both;
}
.container {
  width: 660px;
  margin: 0 auto;
}

下面是利用CSS3的column属性实现的瀑布流布局的效果图：

这里插入图片即可，可以参考展示效果

2.2 利用JavaScript实现瀑布流

除了利用CSS3的column属性之外，我们还可以利用JavaScript来实现瀑布流布局。

首先，需要创建一个容器元素，用来存放要展示的内容。然后，需要将内容根据一定的规则排列在不同的列中，每列宽度相同，但是高度可以不同。为了实现这个效果，我们可以依次将每个内容块插入到高度最短的那一列的末尾。具体实现代码如下：

var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var columns = 3;
var columnWidth = container.offsetWidth / columns;
var heights = [];
for (var i = 0; i < columns; i++) {
  heights.push(0);
}
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  var columnIndex = 0;
  for (var j = 0; j < heights.length; j++) {
    if (heights[j] < heights[columnIndex]) {
      columnIndex = j;
    }
  }
  item.style.left = columnIndex * columnWidth + 'px';
  item.style.top = heights[columnIndex] + 'px';
  heights[columnIndex] += item.offsetHeight;
}

上面的代码首先获取容器和内容块元素，然后定义列数、每列宽度和高度数组。接着，使用两个for循环依次将每个内容块插入到高度最短的那一列的末尾，同时更新高度数组，最终实现布局效果。

最后，还需要为容器和内容块元素添加一些样式：

.container {
  position: relative;
  overflow: hidden;
}
.item {
  position: absolute;
  width: 30%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

下面是利用JavaScript实现的瀑布流布局的效果图：

这里插入图片即可，可以参考展示效果

3. 总结

本文介绍了实现瀑布流布局的两种方式，一种是利用CSS3的column属性，另一种是利用JavaScript编写自动布局算法。两种方式各有优劣，具体使用需要根据项目需求和具体情况选择。需要注意的是，在实现瀑布流布局时，应该确保不同列之间高度的差别不要太大，避免出现页面炸开等问题。