通过纯CSS3实现简单的瀑布流布局

原理

CSS3中存在一个column属性,通过设置column可以达到多列布局的要求。

基本语法

column: column-width, column-count

column-width:规定每个列的宽度,因为瀑布流布局需要宽相等,高不等;
column-count:规定页面中存在的列数,此属性并不常用。

代码的实现

css/style.css
.container{
    -webkit-column-width: 256px;
    -moz-column-width: 256px;
    column-width: 256px;
}
.box{
    margin:10px;
    width:254px;
    border:1px solid #CCC;
    box-shadow: 0 0 15px 0 #CCC;
}
.box img{
    width:246px;
    margin:4px;
}
.box p{
    margin:6px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Waterfall 2</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="box"><img src="images/P_00.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_01.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_02.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_03.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_04.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_05.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_06.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_07.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_08.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_09.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_010.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_011.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_012.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_013.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_014.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_015.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_016.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_017.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_018.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_019.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_00.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_04.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_09.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><img src="images/P_013.jpg" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    </div>
</body>
</html>

不足之处

如果该列的最后一个box超出对齐线,则会向下一列溢出。

最终效果

DEMO

http://demo.lenconda.top/170903/waterfall2

将最新的文章发送到你的邮箱

展示评论