css实现瀑布流效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情

前言

有一种很受图片网站欢迎的版面布局方式，叫做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有一个较大的缺点，就是要设定容器的高度