昨天无聊写了个随机一套图的小程序接口，在写 HTML 的时候遇到了让人难受的 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;
到此瀑布流样式完成，是不是很简单，为了解决大部分兼容问题，就再多加几个重复的兼容浏览器的属性就行了，如下：
- 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 样式效果了，必须得记录下来，以后用！
