grid图片展示 jquery_jquery.gridrotator实现响应式图片展示画廊效果

jquery.gridrotator是一个非常实用的响应式图片展示画廊插件。这个图片展示画廊插件将图片像网格一样排列，然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。

HTML结构:

HTML结构非常简单。

• 
• 

调用插件

$(function() {

$( '#ri-grid' ).gridrotator();

});

注重别忘了引入jQuery和jquery.gridrotator.js文件。

可选参数

// number of rows

rows : 4,

// number of columns

columns : 10,

// rows/columns for different screen widths

// i.e. w768 is for screens smaller than 768 pixels

w1024 : {

rows : 3,

columns : 8

},

w768 : {

rows : 3,

columns : 7

},

w480 : {

rows : 3,

columns : 5

},

w320 : {

rows : 2,

columns : 4

},

w240 : {

rows : 2,

columns : 3

},

// step: number of items that are replaced at the same time

// random || [some number]

// note: for performance issues, the number should not be > options.maxStep

step : 'random',

maxStep : 3,

// prevent user to click the items

preventClick : true,

// animation type

// showHide || fadeInOut || slideLeft ||

// slideRight || slideTop || slideBottom ||

// rotateLeft || rotateRight || rotateTop ||

// rotateBottom || scale || rotate3d ||

// rotateLeftScale || rotateRightScale ||

// rotateTopScale || rotateBottomScale || random

animType : 'random',

// animation speed

animSpeed : 500,

// animation easings

animEasingOut : 'linear',

animEasingIn : 'linear',

// the item(s) will be replaced every 3 seconds

// note: for performance issues, the time "can't" be < 300 ms

interval : 3000,

// if false the animations will not start

// use false if onhover is true for example

slideshow : true,

// if true the items will switch when hovered

onhover : false,

// ids of elements that shouldn't change

nochange : []

当你定义网格大小的时候，你要注重的是不是所有的图片都会在网格中立刻显示。举个例子，你有50张图片，定义了4行5列，那么会有20张图片在网格中显示，其它30张用来做图片翻转切换。

以上所述就是本文的全部内容了，希望大家能够喜欢。