css实现瀑布流布局

web前端开发

共 637字,需浏览 2分钟

 ·

2021-01-05 23:04

作者 | 李美超
链接 |  https://blog.limeichao.cn/article/ec28b177.html


实现思路

依赖 column 便可实现最简单实用的瀑布流布局。

代码

我这里前端框架用的是 vue, 用其他的也一样。
html
:style="{height:heights[Math.floor(Math.random()*4)] + 'px',background:colors[Math.floor(Math.random()*12)]}" :key="index"> {{item}}
Script
css
column-count: 3; 内容均分三份
column-gap: 10px; 列之间的间距
效果:

此时你会发现 8 和 15 分头行动了,此时还需要给子元素加一个属性
break-inside: avoid;
这样就不会被分割了
如下:

具体需要什么效果看自己需求取舍就行。

兼容问题

肯定会有小伙伴说你这兼容性不行啊,ie 10 以下怎么办?
解决办法也不是没有,
那就是:
以后面试的时候先问好需不需要兼容 ie, 如果需要,赶紧撤乎,从根本上解决问题,还能省几根头发。

本文完〜


浏览 19
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报