xGallerify是一款轻量级响应式jQuery图片画廊插件。该图片画廊插件会根据图片的尺寸智能生成网格布局，并且可以动态的添加图片。它具有响应式，易于实现等特点。
使用方法
使用该图片画廊插件需要在页面中引入jquery和jquery.xgallerify.min.js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.xgallerify.min.js"></script>
你可以通过CDN来引入该插件。
<!-- Latest Version -->
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/latest/jquery.xgallerify.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/latest/jquery.xgallerify.js"></script>
<!-- Specific Version -->
<script src="https://cdn.jsdelivr.net/jquery.xgallerify/0.0.13/jquery.xgallerify.min.js"></script>
HTML结构
可以使用一个<div>元素来包裹图片画廊。
<div class="photos">
<div class="photo">
<img src="img/1.jpg">
</div>
<div class="photo">
<img src="img/2.jpg">
</div>
<div class="photo">
<img src="img/3.jpg">
</div>
......
</div>
初始化插件
在页面DOM元素加载完毕之后，可以通过gallerify()方法来初始化该图片画廊插件。
$('.photos').gallerify({
margin:10,
mode:'default',
lastRow:'adjust',
});
配置参数
blowup.js图片放大镜插件的可用配置参数有：
| 参数 | 默认值 | 类型 | 描述 |
| margin | 10 | int | 各个图片之间的margin值 |
| width | 800 | int | 图片画廊的宽度，单位像素 |
| mode | default, bootstrap, flickr 或 small |
string | 模式参数用于决定该图片画廊如何显示，以及每行显示多少张图片 |
| lastRow | adjust 或 fullwidth | string | 设置最后一行为全屏宽度或自动调整（建议使用自动调整） |
| jsSetup | true 或 false | bool | 设置元素的默认CSS样式。 |
| debounceLoad | true 或 false | bool | 该参数会在渲染新的图片之前等待100毫秒，用于提高性能 |
方法
渲染图片
当添加新图片或图片加载时渲染图片画廊。
$('.photos').gallerify();
//...
$(window).on('load', function() { //Gets called when all images got loaded
$('.photos').gallerify.render();
});
异步渲染图片
当你在调用gallerify()方法之后，每次你添加新图片到图片画廊容器.photo中时，都需要进行异步加载图片。
$('.photos').gallerify();
$('.photos').append('
');
$('.photos').append('
');
$('.photos').append('
');
$('.photos').gallerify.renderAsyncImages();
xGallerify图片画廊插件的github地址为：https://github.com/xremix/xGallerify
