使用瀑布流插件 Masonry 进行瀑布流布局

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

瀑布流布局我在很久以前都想实现它，可惜由于时间关系最终不了了之。我在 Book阅读 中就想加入瀑布流效果，但是实现起来太麻烦，还要考虑到兼容性。但是今天我遇到了一款基于 jQuery 的瀑布流插件Masonry，它给我带来了很多惊喜，今天我们一起来学习学习它。

使用jQuery Masonry 插件创建瀑布流式的页面非常的方便和简单。下面我们先来看一看它的运行效果。

看到这样的效果你是不是心动了。下面我开始介绍它的使用。

Masonry 是基于jQuery的，因此我们使用它之前必须要引入jquery作为支持。分别下载 jQuery 与 Masonry ，然后把他们都加载到页面中使用。

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="masonry-docs.min.js"></script>

接下来就是具体的页面代码。把相关的内容都包含在id为masonry的div即可。

<div id="masonry" class="container-fluid">
  <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
  ...
</div>

图片外面可以包裹一层a标签，这样方便跳转。

下面我们需要添加一点样式，.box 类我们添加了浮动属性，还设置了他的宽度。

.container-fluid {
  padding: 20px;
  }
.box {
  margin-bottom: 20px;
  float: left;
  width: 220px;
  }
  .box img {
  max-width: 100%
}

再配合一点js代码开启瀑布流滚动效果。

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

另外关于居中方面，可以用一下代码替换。

$(function() {
    var $objbox = $("#masonry");
    var gutter = 25;
    var centerFunc, $top0;
    $objbox.imagesLoaded(function() {
        $objbox.masonry({
            itemSelector: "#masonry > .box",
            gutter: gutter,
            isAnimated: true
        });
        centerFunc = function() {
            $top0 = $objbox.children("[style*='top: 0']");
            $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
        };
        centerFunc();
    });
    var tur = true;
    $(window).resize(function() {
        if (tur) {
            setTimeout(function() {
                tur = true;
                centerFunc();
            },
            1000);
            tur = false;
        }
    });
});

另外 masonry 还有很多方法和参数，大家可以参考官方文档。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 使用瀑布流插件 Masonry 进行瀑布流布局