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

<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();});

// 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    : []