column和flex 实现瀑布流

一、column 多行布局实现瀑布流

思路分析

column 实现瀑布流主要依赖两个属性
一个是column-count属性，是分为多少列
一个是column-gap属性，是设置列与列之间的距离

.box{
margin:10px;
column-count:3;
column-gap:10px;
}
.item{
margin-bottom:10px;
}
.item img{
width:100%;
height:100%;
}

二、 flex 弹性布局实现瀑布流

思路分析

flex 实现瀑布流需要将最外层元素设置为display:flex,即横向排列
然后通过设置flex-flow:column wrap 使其换行
设置height:100vh 填充屏幕的高度，来容纳子元素
每一列的宽度可用calc函数来设置，即width:calc(100%/3 - 20px)
分成等宽的3列减掉左右两遍的margin距离

.box{
display:flex;
flex-flow:column:wrap;
height:100vh;
}
.item{
margin:10px;
width:calc(100%/3 - 20px);
}
.item img{
width:100%;
height:100%;
}

如果只是简单的页面展示，可以使用column多栏布局和flex弹性布局