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

瀑布流布局我在很久以前都想实现它，可惜由于时间关系最终不了了之。我在 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 还有很多方法和参数，大家可以参考官方文档。

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