bootstrap配合Masonry插件实现瀑布式布局

痛定思痛。 2022-07-11 06:47 175阅读 0赞

# bootstrap配合Masonry插件实现瀑布式布局 #

本文主要参考：

http://www.jq22.com/jquery-info362

问题是这样的，使用bootstrap的栅格进行布局的时候，如果大小超过了，会自动的转到下一行，但是在显示图片的时候就会出现缝隙，下面介绍masonry进行缝隙的填补。

好，下面上货。

1、首先是html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="bootstrap/masonry-docs.min.js"></script>
        <script type="text/javascript" src="t.js"></script>
        <style type="text/css">
            .container-fluid {
                padding: 20px;
            }
            .box {
                margin-bottom: 20px;
                float: left;
                width: 220px;
            }
            .box img {
                max-width: 100%
            }
        </style>
    </head>
    <body>
    <button class="btn btn-info">123</button>
    <div id="masonry" class="container-fluid">
        <div class="box"><img src="img/p1.png">123</div>
        <div class="box"><img src="img/p2.png">34444444444444444444</div>
        <div class="box"><img src="img/p3.png">42234234</div>
        <div class="box"><img src="img/p4.png">234</div>
        <div class="box"><img src="img/p5.png">22222222222222</div>
        <div class="box"><img src="img/p6.png">2321213</div>
    </div>
    </body>
    </html>

然后是t.js

$(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.box',
                gutter: 20,
                isAnimated: true,
            });
        });
    });

最后是效果图：

![Center][]

调整浏览器大小，让图片显示成三列：

![Center 1][]

下面是源码：

[点我下载，不要你的积分哦！！！][Link 1]

[Center]: /images/20220711/2eee20712c164adc8aa2b250dbb3f5f8.png
[Center 1]: /images/20220711/fea84f733bcc438a852b0be004cd06ff.png
[Link 1]: http://download.csdn.net/detail/wild46cat/9740496