# css实现瀑布流布局
最近在实现一个瀑布流布局，查了一些资料，总结一下实现的方法。
所谓瀑布流就是类似下面这种。
# float实现
最简单的方式当然是通过浮动来实现了。
比如我的HTML结构:
.container:after{
clear: both;
content: '';
height: 0;
visibility: hidden;
display: block;
}
.item{
width: 50%;
float: left;
}
@media screen and (min-width: 400px){
.item{
width: 25%;
float: left;
}
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
通过这种方式实现的瀑布流，可以通过媒体查询设置显示的瀑布流行数，然而存在一定的缺陷，在某些情况下图片会被顶下去，导致留白，不是很完美。
# multi-columns
最早multi-columns是实现文章的多列排列，也可以拿来实现瀑布流
.container{
column-count: 5;
}
.item{
break-inside: avoid;
box-sizing: border-box;
padding: 5px;
}
@media screen and (min-width: 400px){
.container{
column-count: 4;
}
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
这种实现方式算是比较简单，而且没什么副作用。
# 总结
参考链接纯CSS实现瀑布流布局