实现瀑布流布局的三种方式

实现瀑布流布局的三种方式：

1. 使用CSS column属性

可以使用CSS column属性实现瀑布流布局。column属性可以将指定区域分成指定数量的列，使得里面的元素按列排列。

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

上述示例代码中，container元素被分成3列，并设置了每列之间的间距为10px。但是使用column属性也存在一些缺点，如浏览器兼容性不太好，列数不容易自适应等问题。

2. 使用JS的瀑布流插件

利用JS的瀑布流插件，可以更好地掌控布局效果，且兼容性更好。

一些瀑布流插件如Masonry、Isotope等非常流行，使用起来也很简单。

<div class="container">
  <div class="item">
    <img src="...">
  </div>
  <div class="item">
    <img src="...">
  </div>
  ...
</div>

<script src="path/to/masonry.js"></script>
<script>
  var container = document.querySelector('.container');
  var msnry = new Masonry(container, {
    itemSelector: '.item',
    columnWidth: '.item',
    gutter: 10
  });
</script>

上述示例代码中，我们使用了Masonry插件，设置了itemSelector为.item，即每个元素的选择器为.item。columnWidth属性设置为.item，这样插件就会以每个元素的宽度作为列宽。gutter属性设置为10，表示每个元素之间的间距为10px。

3. 使用Flexbox和Grid布局

使用CSS的Flexbox和Grid布局，也可以实现瀑布流布局。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex-basis: calc(33.3% - 10px);
  margin-bottom: 10px;
}

上述示例代码中，我们将container设置为display: flex，将其中的元素进行wrap包裹，等宽排列，并设置间距。使用flex-basis属性设置元素的宽度，margin-bottom属性设置元素的间距。

以上三种方式都可以实现瀑布流布局，使用哪种方式，取决于具体情况。但总的来说，第二种方式使用起来最为方便和灵活。