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

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

HTML结构非常简单。

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"><ul><li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li><li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li><！-- ... --></ul></div>

调用插件

$（function（） { $（ "#ri-grid" ）.gridrotator（）;}）;

注意别忘了引入jQuery和jquery.gridrotator.js文件。
可选参数

// number of rowsrows: 4, // number of columns columns : 10, // rows/columns for different screen widths// i.e. w768 is for screens smaller than 768 pixelsw1024: {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.maxStepstep: "random",maxStep : 3, // prevent user to click the itemspreventClick: true, // animation type// showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || randomanimType: "random", // animation speedanimSpeed: 500, // animation easingsanimEasingOut: "linear",animEasingIn: "linear", // the item（s） will be replaced every 3 seconds// note: for performance issues, the time "can"t" be < 300 msinterval: 3000,// if false the animations will not start// use false if onhover is true for exampleslideshow: true,// if true the items will switch when hoveredonhover : false,// ids of elements that shouldn"t changenochange: []

当你定义网格大小的时候，你要注意的是不是所有的图片都会在网格中立刻显示。举个例子，你有50张图片，定义了4行5列，那么会有20张图片在网格中显示，其它30张用来做图片翻转切换。
以上所述就是本文的全部内容了，希望大家能够喜欢。