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