昨天无聊写了个随机一套图的小程序接口，在写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样式效果了，必须得记录下来，以后用！
评论 （2）