前端 用多列实现多玩图库瀑布流效果 2015年11月25日
学习
0 条评论

想要在css里实现多列，就需要定义：

  1. columns-count：n  // 实现n列多列
  2. column-gap： n px  // 实现多列间的间隙大小 (注意没有s)
  3. column-rule：n px(间隔线宽度) outset…(间隔线类型) color(各种颜色)

一、代码实现

（1）文字实现

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<div class="div1">
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
    so be it ! i am god!
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
.div1{
    /*列数*/
    columns-count: 4;
    -webkit-column-count: 4;
    /*列间间隙*/
    -webkit-column-gap: 30px;
    column-gap: 30px;
    /*间隔的形式（条纹）*/
    column-rule: 5px outset #454545;
    -webkit-column-rule: 5px outset #454545;
}

实现效果：

233

（2）图片实现

下面实现照片墙的瀑布流效果：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div><img src="1.jpg"></div>
    <div><img src="2.gif" width="300" height="500"></div>
    <div><img src="3.gif"></div>
    <div><img src="4.gif" width="300" height="500"></div>
    <div><img src="5.jpg"></div>
    <div><img src="6.gif"></div>
    <div><img src="7.jpg"width="300" height="500"></div>
    <div><img src="8.gif"></div>
    <div><img src="9.jpg"></div>
    <div><img src="1.jpg" width="300" height="500"></div>
    <div><img src="2.gif"></div>
    <div><img src="3.gif"></div>
    <div><img src="4.gif"></div>
    <div><img src="5.jpg" width="300" height="500"></div>
    <div><img src="6.gif"></div>
    <div><img src="7.jpg"></div>
    <div><img src="8.gif"></div>
    <div><img src="9.jpg"></div>
    <div><img src="1.jpg" width="300" height="500"></div>
    <div><img src="2.gif"></div>
    <div><img src="3.gif"></div>
    <div><img src="4.gif" width="300" height="500"></div>
    <div><img src="5.jpg"></div>
    <div><img src="6.gif"></div>
    <div><img src="7.jpg"></div>
    <div><img src="8.gif"></div>
    <div><img src="9.jpg"></div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
.container{
    column-width: 250px;
    -webkit-column-width: 250px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
}
 
.container div{
    width: 250px;
    margin: 5px 0;
    /*为什么我们不需要左右间距？因为通过多列间距gap我们已经实现了*/
}

实现效果：

233

因为图片的规格相差比较多，所以瀑布流的实现效果不是很美观…

二、总结

实际应用的时候需要根据图片的规格设置比例，才会有比较好的效果。

Post Views: 61