详解纯css实现瀑布流(multi-column多列及flex布局)
2024-08-28 04:07:08
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了
1.multi-column多列布局实现瀑布流
先简单的讲下multi-column相关的部分属性
column-count设置列数column-gap设置列与列之间的间距column-width设置每列的宽度
还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断
break-inside属性值
- auto 指定既不强制也不禁止元素内的页/列中断。
- avoid 指定避免元素内的分页符。
- avoid-page 指定避免元素内的分页符。
- avoid-column 指定避免元素内的列中断。
- avoid-region 指定避免元素内的区域中断。
截取了部分,可自己填充
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/* html文件 */ <!-- 使用multi-columns实现瀑布流 --> < div id = "root" > < div class = "item" > < img class = "itemImg" src = "../images/1.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/2.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/3.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/4.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/5.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > </ div > |
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/* css样式 */ body { background : #e5e5e5 ; } /* 瀑布流最外层 */ #root { margin : 0 auto ; width : 1200px ; column-count: 5 ; column- width : 240px ; column-gap: 20px ; } /* 每一列图片包含层 */ .item { margin-bottom : 10px ; /* 防止多列布局,分页媒体和多区域上下文中的意外中断 */ break-inside: avoid ; background : #fff ; } .item:hover { box-shadow: 2px 2px 2px rgba( 0 , 0 , 0 , . 5 ); } /* 图片 */ .itemImg { width : 100% ; vertical-align : middle ; } /* 图片下的信息包含层 */ .userInfo { padding : 5px 10px ; } .avatar { vertical-align : middle ; width : 30px ; height : 30px ; border-radius: 50% ; } .username { margin-left : 5px ; text-shadow : 2px 2px 2px rgba( 0 , 0 , 0 , . 3 ); } |
2.jQuery特效 flex布局实现瀑布流将外层设置为row布局,然后再设置一个容器并设置为column布局,它是将列作为一个整体,然后在对列进行划分,在列里进行宽固定来实现的
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/* html文件(只截取两列布局)*/ < div id = "root" > < div class = "itemContainer" > < div class = "item" > < img class = "itemImg" src = "../images/1.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/2.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/3.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/4.jpg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/5.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/6.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/7.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > </ div > < div class = "itemContainer" > < div class = "item" > < img class = "itemImg" src = "../images/5.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/7.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/6.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/5.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/6.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > < div class = "item" > < img class = "itemImg" src = "../images/6.jpeg" alt = "" /> < div class = "userInfo" > < img class = "avatar" src = "../images/gift.png" alt = "" /> < span class = "username" >牵起你的左手护着你</ span > </ div > </ div > </ div > </ div > |
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/* css文件 */ body{ background : #e5e5e5 ; } #root{ display : flex; flex- direction : row; margin : 0 auto ; width : 1200px ; } .itemContainer{ margin-right : 10px ; flex- direction : column; width : 240px ; } .item{ margin-bottom : 10px ; background : #fff ; } .itemImg{ width : 100% ; } .userInfo { padding : 5px 10px ; } .avatar { vertical-align : middle ; width : 30px ; height : 30px ; border-radius: 50% ; } .username { margin-left : 5px ; text-shadow : 2px 2px 2px rgba( 0 , 0 , 0 , . 3 ); } |
实践后发现,纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流更符合我们常见的瀑布流jQuery插件
最新文章
- Mac Pro 日历增强工具 Itsycal
- MySQL存储过程与存储函数的区别
- 解决scrollview上的menu拖动问题以及menu item在可视区外仍能触发的问题
- 【leetcode】Insertion Sort List (middle)
- js fs read json 文件json字符串无法解析
- P1049送给圣诞夜的礼品(矩阵十大问题之四)
- MathType 插入定义的chapter and section break后无法隐藏
- json 转对象
- 一个Java对象到底占多大内存?(转)
- Fiddler抓取https设置及其原理
- HTTP协议以及HTTP2.0/1.1/1.0区别
- 基于Python的Webservice开发(三)-Django安装配置
- java中的String整理
- Perl面向对象(3):解构——对象销毁
- abaqus查询网格相关
- 开发中CollectionUtils处理集合
- Problem 1 :nslookup,dig,host及网络相关命令
- 启用sa账号
- [转]使用C#开发ActiveX控件全攻略
- web上传照片
热门文章
- 第55节:Java当中的IO流-时间api(下)-上
- Kali学习笔记22:缓冲区溢出漏洞利用实验
- 从前端中的IOC理念理解koa中的app.use()
- ES6 块级作用域
- 关于sql和MySQL的语句执行顺序(必看!!!)
- 【转载】uCOS系统的思考
- CNN 模型压缩与加速算法综述
- nginx详解反向代理、负载均衡、LNMP架构上线动态网站(week4_day1_part1)-技术流ken
- selenium3环境搭建以及各浏览器驱动的使用方法
- Visual Studio 2017 - Windows应用程序打包成exe文件(1)- 工具简单总结