纯 css 写瀑布流，其实就两行代码就可以实现复杂的图文瀑布流布局，这里要用到css3新特性属性multi-columns 或 flexbox。
1.multi-columns 方式：
通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。
设置这样的 html 结构：
<div class="masonry"> <div class="item"> <div class="item_content content-lar"> 1 </div> </div> <div class="item"> <div class="item_content content-sma"> 2 </div> </div> <div class="item"> <div class="item_content content-mid"> 3 </div> </div> <div class="item"> <div class="item_content content-sma"> 4 </div> </div> <div class="item"> <div class="item_content content-mid"> 5 </div> </div> <div class="item"> <div class="item_content content-lar"> 6 </div> </div> <div class="item"> <div class="item_content content-sma"> 7 </div> </div> <div class="item"> <div class="item_content content-lar"> 8 </div> </div> <div class="item"> <div class="item_content content-lar"> 9 </div> </div> <div class="item"> <div class="item_content content-sma"> 10 </div> </div> <div class="item"> <div class="item_content content-mid"> 11 </div> </div> <div class="item"> <div class="item_content content-mid"> 12 </div> </div> <!-- more items --> </div>
.masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数） 和 column-gap（列间距）
item 中设置 break-inside:avoid，这是为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。
在 css 中设置包裹 masonry 和 item 的属性样式：
.masonry {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
width: 80%;
margin:2em auto;
}
.item {
padding: 2em;
margin-bottom: 2em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #f60;
}
当然为了布局具有响应式效果，可以借助媒体查询属性，在不同屏幕大小的条件下设置瀑布流容器 masonry 的 column-count 来自适应改变列数：
@media screen and (max-width: 800px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
@media screen and (max-width: 500px) {
.masonry {
column-count: 1; // two columns on larger phones
}
}
那么所产生的效果是：
也是根据屏幕大小自适应改变列数
2.flexbox 方式：
html 的结构依旧和上面的 Multi-columns 展示的一样。只是在 .masonry 容器中使用的 CSS 不一样：
在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行。
这里关键是容器的高度，我这里要显式的设置 height 属性，当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样。
记住，这里height可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。
.masonry {
height: 800px;
display: flex;
flex-flow: column wrap;
width: 80%;
margin:2em auto;
}
对于 .item，可以不再使用 break-inside:avoid，但其它属性可以是一样。
同样的，响应式设置，使用 Flexbox 实现响应式布局比多列布局 Multi-columns 要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。
前面也提到过了，如果不给 .masonry 容器显式设置高度是无法包裹项目列表的，那么这里响应式设计中就需要在不同的媒体查询条件下设置不同的高度值：
@media screen and (max-width: 1100px) {
.masonry {
height: 800px;
}
}
@media screen and (max-width: 800px) {
.masonry {
height: 1100px;
}
}
@media screen and (max-width: 600px) {
.masonry {
height: 1300px;
}
}
@media screen and (max-width: 460px) {
.masonry {
height: 1600px;
}
}
也是根据屏幕大小自适应改变列数。
看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列：
这样子若是动态加载图片的瀑布流，体验就会很不好
我们想要的是这样：
