images-grid.js是一款仿Facebook网格图片画廊jquery插件。该网格图片画廊在一组图片中是会显示前面1-6幅图片，所有图片以网格进行排列布局。当用户点击某张图片之后，会以全屏轮播图的方式展示所有的图片。
使用方法
在页面中引入jquery.min.js、images-grid.js文件以及样式文件images-grid.css。
<link rel="stylesheet" href="src/images-grid.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script src="src/images-grid.js"></script>
HTML结构
使用一个<div>来作为网格图片画廊的容器。
<div id="imgs"></div>
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化images-grid.js网格图片画廊插件。
$('#imgs').imagesGrid({
images: ['img1.png', ... , 'imgN.png']
});
配置参数
images-grid.js网格图片画廊插件的可用配置参数如下。
images: [
'hello.png',
'preview.jpg',
{
src: 'car.png', // url
alt: 'Car', // alternative text
title: 'Car', // title
caption: 'Supercar', // modal caption
thumbnail: 'cap-preview.png' // thumbnail image url
}
]
| 参数 | 类型 | 默认值 | 描述 |
| cells | number | 5 | 显示网格的最大数量，1-6个。 |
| align | boolean | false | 以不同的高度来对齐图片。 |
| nextOnClick | boolean | true | 时尚在全屏轮播图中点击图片时显示下一幅图片。 |
| showViewAll | string|boolean | more | 是否显示“查看全部图片”文字。可选值有：'more'、'always'和false。 |
| viewAllStartIndex | number | auto | 点击“查看全部”链接时，初始化显示的图片的索引。 |
| getViewAllText | function | 点击“查看全部图片”链接的回调函数。 |
事件
网格事件
1、onGridRendered {function}：当网格中的所有图片都被添加到DOM中时的回调函数。
onGridRendered: function($grid) { }
2、onGridItemRendered {function}：当网格中的某张图片被添加到DOM中时的回调函数。
onGridItemRendered: function($item, image) { }
3、onGridLoaded {function}：当所有图片都被加载后的回调函数。
onGridLoaded: function($grid) { }
4、onGridImageLoaded {function}：当某张图片被加载时的回调函数。
onGridImageLoaded: function(event, $img, image) { }
模态窗口事件
1、onModalOpen {function}：模态窗口打开时的回调函数。
onModalOpen: function($modal, image) { }
2、onModalClose {function}：模态窗口关闭时的回调函数。
onModalClose: function() { }
3、onModalImageClick {function}：模态窗口中的图片被点击时的回调函数。
onModalImageClick: function(event, $img, image) { }
4、onModalImageUpdate {function}：模态窗口中的图片被更新时的回调函数。
onModalImageUpdate: function($img, image) { }
方法
1、modal.open：打开模态窗口（第二个参数是图片的索引，为可选参数）。
$('#imgs').imagesGrid('modal.open', 0)
2、modal.close：关闭模态窗口。
$('#imgs').imagesGrid('modal.close')
3、destroy：销毁网格图片画廊实例。
$('#imgs').imagesGrid('destroy')
images-grid.js网格图片画廊插件的github地址为：https://github.com/taras-d/images-grid
