CSS实现瀑布流布局

如代码：

<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实现瀑布流布局