bootstrap+masonry+imagesloaded实现图文瀑布流

2018-06-20

前言

最近一个后台管理网站中出现列表之间出现空格，发现是由于高度不一致导致的，比较好的解决方法就是使用瀑布流的技术。

相比较其它瀑布流插件，masonry插件实现比较简单。

同时由于加载图片时，可能出现实现瀑布流时图片还未加载成功会引起排版错乱。所以需要使用imagesloaded插件，确保图片加载之后实现瀑布流。

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <title>Title</title>
    <style>
       .content-body .panel-body {
            border: 1px solid #bce8f1;
        }
        .content-body img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="content-body row">
    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=fb8af6169d2397ddc9799e046983b216/0823dd54564e92584fbb491f9082d158cdbf4eb0.jpg" alt="">
        </div>
    </div>

    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=4dbc00900523dd543e73a168e108b3df/50da81cb39dbb6fdd4c999d20524ab18962b37b7.jpg" alt="">
        </div>
    </div>

    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=66936b960523dd543e73a168e108b3df/50da81cb39dbb6fdffe6f2d40524ab18962b3786.jpg" alt="">
        </div>
    </div>

    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=dbf76aea6ed0f703f9b293dc38f85148/faf2b2119313b07e9b646cf500d7912396dd8c75.jpg" alt="">
        </div>
    </div>

    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=41786b14fed3572c79e29adcba126352/3b87e950352ac65c5b915a8ef7f2b21192138ab2.jpg" alt="">
        </div>
    </div>

    <div class="panel col-lg-4 col-md-6 col-xs-12">
        <div class="panel-body">
            <img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=797e6c9e9422720e64cee4fa4bca0a3a/4a36acaf2edda3cc0c5071dc0de93901203f9292.jpg" alt="">
        </div>
    </div>
</div>
<script>
    $(function () {
        $('.content-body').imagesLoaded(function() {
            $('.content-body').masonry({
                itemSelector: '.panel'
            });
        });
    })
</script>
</body>
</html>