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用于指定图片分类。largethumbnail分别是大图和缩略图。你可以设置多个button_listtags项。

配置参数

参数 描述
filterEffect 图片分类过滤时的动画过渡效果,可以设置为: moveup, scaleup, fallperspective, fly, flip, helix , popup
hoverDirection 缩略图上的遮罩进入的方向和鼠标进入的方向相同。设置为false则反向。
hoverDelay 鼠标悬停方向
hoverInverse 反转鼠标悬停方向
expandingSpeed 点击缩略图后展开大图的速度
expandingHeight 大图的高度
items 该参数参考上面的初始化代码