这是一款简单实用的类似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 | 两个网格元素之间的垂直间距 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!