css 实现瀑布流效果

前言

有一种很受图片网站欢迎的版面布局方式，叫做 Masonry Layout，翻译为瀑布流效果，这种排版方式的特性就是内容由多个不同高度的方块组成，而版面切割为多个直行，这些方格在每一个直行中一个接一个排列，所以看起来行与行之间会有一些不整齐的感觉

要制作这种版面布局最容易最方便就是直接加载别人写好的 js 代码，例如 Masonry.js，Isotope.js 等等，原理是通过 js 计算由多少个方格，再计算每一个方格的宽高，将全部方格的 position 都设为 absolute，注意计算出它的 top 和 left 去定位

而我们要使用纯 css 来制作瀑布流效果

Css column

第一种方法就是使用 2 个 css 属性，column-count和column-gap

首先就是 html 结构，建立一个 div，class 是 masonry，里面再建立一个 div，class 是 item，.item 里放入一个图片，新增十多份.item，图片的尺寸也随机调整一下

<div class="masinry">    <div class="item">      <img src="https://picsum.photos/360/480?random=1" alt="">    </div>    <div class="item">      <img src="https://picsum.photos/360/420?random=2" alt="">    </div>    ...多个.item</div>

然后为 class 为 masinry 的 div 设置column-count和column-gap，此时版面已经分为了四个直行了，给 calss 为 item 的 div 设置 padding 并为里面的 img 设置 display:block、width：100%和 height：auto，这样图片就会因父元素容器的大小而缩放了

body{    margin: 4px;    font-family: Helvetica;}.masinry{    column-count: 4;    column-gap: 0;}

可以看到图片已经排成瀑布流的样子了

不过图片的排列是从上往下排列的而不是从左往右，我们想根据时间来排列这样的排列顺序就未必合适了，这就是使用 css column 的限制

flexbox

第二个方法就是 flexbox 了，html 还用上面的结构，只需将 css 稍改一下

.masinry{ //内容由上至下排列，容器的高度少于内容的高度时就换行，也就是向右排列    display: flex;    flex-direction: column;    flex-wrap: wrap;    height: 1000px;}
.item{    position: relative;    width: 25%;    padding: 2px;    box-sizing: border-box;}
.item img{    display: block;    width: 100%;    height: auto;}

不过使用 flexbox 也是从上至下排列的，但是 flexbox 里的元素可以套用一个叫 order 的设定值，让它可以不跟随 HTML 结构顺序来排列

.item:nth-child(4n+1){    order: 1;}
.item:nth-child(4n+2){    order: 2;}
.item:nth-child(4n+3){    order: 3;}
.item:nth-child(4n){    order: 4;}

现在 flexbox 里的元素实现了瀑布流效果也不跟随 HTML 结构顺序来排列，不过使用 flexbox 有一个较大的缺点，就是要设定容器的高度