专注前端行业精选
使用分栏布局实现瀑布流效果 纯css实现瀑布流效果
作者:鹏仔先生日期:2020-06-03浏览:743分类: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 来实现一套响应的瀑布流。
手机扫码访问
猜你还喜欢
- 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边框如何去除
- 11-19 微信小程序 接口请求封裝
- 11-06 VUE中实现输入框禁止输入小数方法分享
- 10-29 vue表单验证 input输入框禁止输入空格
- 10-27 iView 日期时间选择器设置开始时间至结束时间限制
暂无评论,来添加一个吧。