ShiningDan的博客

网页组件制作之瀑布流效果

发表于 | 分类于 | | 阅读次数

在该笔记中将学到列表展示中倒计时效果的方法与展示效果

本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

显示效果如下：

瀑布流布局的每栏都是等宽不等高的图片。

CSS3 的多栏布局实现瀑布流布局

通过 CSS3 的 column 多列属性，可以实现瀑布流布局。

column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。

一般使用 column-width 设置每列元素的宽度，然后可以通过样式自动实现瀑布流布局。

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        #main{-moz-column-width:202px; /* Firefox */
              -webkit-column-width:202px; /* Safari 和 Chrome */
              column-width:202px;}
        .box{margin: 15px 0 0 15px;}
        .img{border: 1px solid #ccc;padding: 10px;width: 165px;border-radius: 5px;box-shadow: 0 0 5px #ccc;}
        .img img{display: block;width: 165px;}
    </style>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="img"><img src="images/1.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="img"><img src="images/2.jpg" alt=""></div>
            ...
        <div class="box">
            <div class="img"><img src="images/40.jpg" alt=""></div>
        </div>
    </div>
</body>
</html>