让代码更简单

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

重要:本文最后更新于2021-08-21 14:32:35,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

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

两句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样式效果了,必须得记录下来,以后用!

感觉很棒!可以赞赏支持我哟~

3 打赏

评论 (2)

登录后评论
阿狗666
给我加到dmd主题上
QQ咨询 邮件咨询