通过BootStrap实现简单的瀑布流布局

原理

BootStrap自带栅格系统,可以实现多列自适应布局。使用栅格系统进行布局设计可以比较完美地符合瀑布流布局的要求。关于栅格系统,请参见http://boot.lenconda.top/css/#grid

准备工作

1.引入BootStrap

BootStrap可以从CDN几点引入,或者从单文件引入:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">

或者

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

2.图片素材

瀑布流布局通常是卡片状,上部放置图片,下部放置文字段落。为了完整模拟瀑布流布局,我们需要准备一张经过加工的图片:
蜗牛图片素材

编写代码

waterfall1.css:
*{
    margin:0;
    padding:0;
}
.column{
    width:100%;
    margin:10px 0;
    border:1px solid #9d9d9d;
    box-shadow:0 0 15px 0 #9d9d9d;	/*为了美观,将边框加上放射阴影*/
}
.column img{
    width:100%;
    margin-bottom:10px;
}
.column p{
    margin:10px 20px;	/*为了美观,将段落设置为边缘缩进*/
}
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Waterfall</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/waterfall1.css" type="text/css">
</head>
<body>
    <div class="container-fluid">
        <div class="col-md-3">
            <div class="col-md-10 col-md-offset-1">
                <div class="column">
                    <img src="images/timg.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="column">
                    <img src="images/timg.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>
        </div>
        <div class="col-md-3">
            <div class="col-md-10 col-md-offset-1">
                <div class="column">
                    <img src="images/timg.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="column">
                    <img src="images/timg.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="col-md-10 col-md-offset-1">
                <div class="column">
                    <img src="images/timg.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="column">
                    <img src="images/timg.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="col-md-10 col-md-offset-1">
                <div class="column">
                    <img src="images/timg.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="column">
                    <img src="images/timg.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>
        </div>
    </div>
</body>
</html>

最终效果

DEMO

http://demo.lenconda.top/170901/waterfall

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

展示评论