【纯css 实现瀑布流效果】原理是 css 的 column 属性，话不多说直接上代码
* {
padding: 0;
margin: 0;
}#main {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
padding: 10px;
}.box {
padding: 15px;
border: solid 2px #eeeeee;
border-radius: 4px;
margin-bottom: 15px;
cursor: pointer;
}.box img {
width: 100%;
}
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
![纯css 实现瀑布流效果]()
文章图片
参照：https://www.cnblogs.com/CraryPrimitiveMan/p/3777033.html
