css实现图片的瀑布流

···

<div class="masonry">
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>

</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>

</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>

</div>
</div>
其中div.masonry是瀑布流的容器， 这个div.column称为列表项目的单独容器，其里面放置了n个列表div.item
.masonry {
display: flex;
flex-flow: row wrap;
width: 100%;
height: auto;
}

.column {
display: flex;
flex-flow: column wrap;
width: calc(100%/5);
margin: 0;

这里有一个需要注意，在.column咱们通过calc()方法来控制每个列的宽度，如果你希望是三列，那么可以设置width: calc(100% / 3);实际中根据自己的设计来设置width：

这种方案对应的响应式设计，需要在不同的媒体查询下修改width值，比如：

@media only screen and (min-width: 500px) {
.masonry {
flex-direction: row;
}
}

.column {
display: flex;
flex-flow: column wrap;
width: 100%;
}

···