使用分栏布局实现瀑布流效果 纯css实现瀑布流效果
作者：鹏仔先生日期：2020-06-03浏览：908分类：CSS
本次，使用纯css实现瀑布流，方便简单快捷。
下面我简单写了一个demo分享给大家
其中
column-count 用来设置列数
column-gap 用来设置列间距
break-inside: avoid; 避免在元素内部断行并产生新列
附代码如下:
<style>
body{
width: 100%;
height: 100%;
background: #000;
}
.box{
width: 600px;
background: #fff;
margin: 0 auto;
/*column-count用来设置列数*/
column-count: 3;
/*column-gap用来设置列间距*/
column-gap: 0;
}
.box div{
width: 150px;
padding: 25px;
/*避免在元素内部断行并产生新列*/
break-inside: avoid;
}
.box div img{
width: 100%;
}
</style><body> <div class="box"> <div><img src="img/1.jpg"></div> <div><img src="img/2.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/4.jpg"></div> <div><img src="img/5.jpg"></div> <div><img src="img/6.jpg"></div> <div><img src="img/7.jpg"></div> <div><img src="img/8.jpg"></div> <div><img src="img/9.jpg"></div> <div><img src="img/10.jpg"></div> </div> </body>
最终效果图如下：
当然，相信你足够优秀，可以使用媒体查询，配合上 column-count 来实现一套响应的瀑布流。
猜你还喜欢
- 04-30 object-fit:cover;在小程序中不起作用，小程序图片变形了如何处理
- 04-26 （安卓/IOS）APP调用H5事件，H5调用APP事件
- 04-26 css防止图片变形 object-fit: cover; 属性介绍
- 03-15 VUE中实现点击打印功能 vue网页打印 vue-easy-print
- 02-25 JS判断某个时间戳是否为当天时间
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页，vue判断没有上页返回首页
- 11-25 小程序中 时间戳转日期格式（年月日时分秒）封装使用
- 11-25 小程序中button的边框无法去除 button边框如何去除
取消回复欢迎 你 发表评论:
- 搜索
- 最新评论
-
鹏仔先生 评论于：04-26
一只菜鸟 评论于：04-21新闻头条 评论于：03-05
怎么会这样啊，我前同事也申请了劳动仲裁，但是拿到工资了呀，就算他们公司没有钱，就算破产，也要析产的呀，不然怎么会有人创业失败负债累累，你们是不是被他们合伙骗了。
访客 评论于：12-15
访客 评论于：12-08访客 评论于：11-06
访客 评论于：11-06
- 访客 评论于：10-29
有一个问题，拉取的openid不是按照关注的数据哦排序显示的，如何保证最新关注的人在列表的最后一条，且会漏掉部分关注的用户，除非下次全量拉取，可能会
访客 评论于：10-13
- 随机tag
- 站点信息
-
- 文章总数:225
- 页面总数:1
- 分类总数:8
- 标签总数:21
- 评论总数:23
- 浏览总数:140335
暂无评论，来添加一个吧。