PetitQcolumn-count: 5;
HTML/CSS
两行CSS代码实现最简单瀑布流实现方式
昨天无聊写了个随机一套图的小程序接口，在写 HTML 的时候遇到了让人难受的 css，百度后找到一位大神提供的办法，以后图片瀑布流都是垃圾，两行代码就够了！感觉自己膨胀了哈，下面一起来看看效果。
代码很简单，只需要给包裹所有图片的元素设置一个 CSS 样式，然后给包裹一张图片的元素设置一个样式即可。比如
<ul><li><a href="xxxx"><img src="xxxx"/></a></li>......
</ul>
也想出现在这里？联系我们吧
给 ul 元素设置 css 样式，需要几列就填几，这里是 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 样式效果了，必须得记录下来，以后用！
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
