如代码:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
一般给li添加css:float: left;可以自动靠左排序

但是当 li 高度不一样的时候就会很丑,还有空隙:

所以我们可以使用纯css实现瀑布流效果:

只需给 容器添加css:
ul{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
}
给容器里的元素添加css:
ul li{
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid; */
break-inside: avoid;
}
效果如下:

未经允许不得转载:天府数据港官方信息博客 » CSS实现瀑布流布局
客官点个赞呗! (0)