简单的Masonry瀑布流jQuery图片网格布局插件

这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用，它通过imagesloaded来加载图片，并且可以非常方便的动态添加任意数量的图片到网格布局中。

使用方法

在页面中引入jQuery和imagesloaded.pkgd.min.js、fluid.jquery.js文件。

<script src="jquery.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>              
<script src="js/fluid.jquery.js"></script>              
              

HTML结构

该瀑布流网格布局的基本HTML结构如下：

<div class="container">
  <div class="container_inner">
    <div class="item">
      <img src="images/1.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/2.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/3.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/4.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/5.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <p class="load">Fetching images</p>
</div>              
              

CSS样式

可以为该瀑布流图片网格布局添加一些必要的CSS样式，这些样式是可以修改的，根据需要自行定义。

.container {
    width: 600px;
    position: relative;
}

.item {
    position: absolute;
}

.item img {
    display: block;
    width: 100%;
}                
              

初始化插件

在页面加载完毕之后通过下面的方法来初始化该瀑布流图片网格布局插件。

var fluid;
imagesLoaded( $('.container'), function() {
    fluid = new $('.container').fluid({col: 3, spacingX: 20, spacingY: 20});
});
              

动态添加图片

var $items = [$('<div class="item"> <img src="images/1.jpg" alt=""> </div>')];
imagesLoaded( $items, function() {
    fluid.add($items);
});                
              

配置参数