简单css实现图片瀑布流排版
发表于|更新于
|阅读量:
html：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="waterfall">
<img src="./imgs/1.jpg" >
<img src="./imgs/2.jpg" >
<img src="./imgs/3.jpg" >
<img src="./imgs/4.jpg" >
<img src="./imgs/5.jpg" >
<img src="./imgs/6.jpg" >
<img src="./imgs/7.jpg" >
<img src="./imgs/8.jpg" >
<img src="./imgs/9.jpg" >
<img src="./imgs/10.jpg" >
<img src="./imgs/11.jpg" >
</div>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| #waterfall {
column-count: 3;
margin: 0 auto;
column-gap: 15px;
margin-top: 16px;
}
#waterfall img {
display: block;
width: 100%;
margin-bottom: 20px;
overflow: hidden;
}
#waterfall img:hover{
transform: rotate(0deg);
transform: scale(0.99);
transition: all 200ms linear;
}
|
参考源码：https://www.jianguoyun.com/p/DdGPU1EQw-6yCRiBstkEIAA
