导读：这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用，它通过imagesloaded来加载图片，并且可以非...
这是一款简单实用的类似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);
});
配置参数
名称 默认值值 描述
col 无 必填参数。指定网格中一行有多少列
spacingX 10 两个网格元素之间的水平间距
spacingY 10 两个网格元素之间的垂直间距
