css3的column属性可以轻松实现瀑布流,js也可以实现。瀑布流效果比普通的列表好看很多,我爱模板网页推荐几个基于js或jQuery的瀑布流:
带喜欢和顶踩和返回顶部按钮的可以无限加载的jquery瀑布流
这次,我爱模板网也是采用css3的column属性实现的瀑布流,代码如下:
<ul> <li></li> <li></li> <li></li> <li></li> </ul> .list{ column-count:3; column-gap:28px; } li{ margin-bottom:28px; break-inside:avoid; background-color: #fff; border-radius: 5px; padding-bottom: 20px; }
火狐firefox和chrome的效果如下:
但是当li只有一个时,chrome正常,火狐却断裂开了
chrome效果:
firefox效果:
莫慌张,只要在li里加上下面的样式即可:
height: 100%; overflow: auto;
最终,火狐浏览器就正常了。