jQuery弹性响应式网格布局图片画廊插件

jquery-elastic-grid是一款仿造Google Image Search的轻量级、使用简单的弹性响应式网格布局图片画廊jQuery插件。该网格图片画廊插件支持PNG图片，JPG图片和GIF图片。它使用缩略图来制作网格布局，在用户点击缩略图时将打开大图并带一些相关内容。

该网格布局图片画廊同时还可以进行图片分类过滤，在过滤时可以设置多种CSS3过渡动画效果。

使用方法

HTML结构

该弹性网格图片布局的HTML结构使用一个空的<div>即可。

使用该插件前要先引入jQuery、elastic_grid.min.css和elastic_grid.min.js文件。

<link rel="stylesheet" type="text/css" href="css/elastic_grid.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script type="text/javascript" src="js/elastic_grid.min.js"></script>                
              

<div id="elastic_grid_demo"></div>       
              

初始化插件

$(function(){
    $("#elastic_grid_demo").elastic_grid({
        'showAllText' : 'All',
        'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup
        'hoverDirection': true,
        'hoverDelay': 0,
        'hoverInverse': false,
        'expandingSpeed': 500,
        'expandingHeight': 500,
        'items' :
        [
            {
                'title'         : 'Azuki bean',
                'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
                'thumbnail'     : ['images/small/1.jpg', 'images/small/2.jpg', 'images/small/3.jpg', 'images/small/10.jpg', 'images/small/11.jpg'],
                'large'         : ['images/large/1.jpg', 'images/large/2.jpg', 'images/large/3.jpg', 'images/large/10.jpg', 'images/large/11.jpg'],
                'button_list'   :
                [
                    { 'title':'Demo', 'url' : 'http://www.htmleaf.com/', 'new_window' : true },
                    { 'title':'Download', 'url':'http://www.htmleaf.com/', 'new_window' : false}
                ],
                'tags'          : ['Self Portrait']
            }
        ]
    });
});          
              

每一个items数组中的对象是一张图片。tags用于指定图片分类。large和thumbnail分别是大图和缩略图。你可以设置多个button_list和tags项。

配置参数