两句CSS实现图片瀑布流效果

昨天无聊写了个随机一套图的小程序接口，在写HTML的时候遇到了让人难受的css，百度后找到一位大神提供的办法，以后图片瀑布流都是垃圾，两行代码就够了！感觉自己膨胀了哈，下面一起来看看效果。

两句CSS实现图片瀑布流效果

代码很简单，只需要给包裹所有图片的元素设置一个CSS样式，然后给包裹一张图片的元素设置一个样式即可。比如

<ul>
<li><a href="xxxx"><img src="xxxx"/></a></li>
......
</ul>

给ul元素设置css样式，需要几列就填几，这里是5列。

column-count: 5;

给li元素设置样式

break-inside: avoid;

该样式默认图片间隔30个像素，如果想自定义，请使用如下样式

column-gap: 0;

到此瀑布流样式完成，是不是很简单，为了解决大部分兼容问题，建议使用如下css样式

ul{
column-count: 5;
column-gap: 0;
-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari 和 Chrome */
-moz-column-gap:0; /* Firefox */
-webkit-column-gap:0; /* Safari 和 Chrome */
}

子元素的样式无变化。

这是我见过最简单的css样式效果了，必须得记录下来，以后用！