gridrotator.js响应式图片画廊插件

当你定义网格大小的时候，你要注意所有图片是否占满网格区域。比如你有50张图片，定义了4行5列，总共有20张图片在网格中显示，其它30张用来做图片随机翻转切换。gridrotator.js就是实现这种图片网格画廊效果。

分类：图片代码 > 网格难易：高级

查看演示下载资源下载积分： 20 积分

图片列表代码

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <img class="ri-loading-image" src="images/loading.gif"/>
    <ul>
        <li><a href="http://www.sucaihuo.com/js/442.html" target="_blank" ><img src='images/medium/1.jpg'  title='jQuery圆角插件：jquery.corners.js'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/443.html" target="_blank" ><img src='images/medium/2.jpg'  title='jQuery仿蜜淘在线客服'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/444.html" target="_blank" ><img src='images/medium/3.jpg'  title='jQuery+turn.js翻书、文档和杂志'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/445.html" target="_blank" ><img src='images/medium/4.jpg'  title='jCarousel演示7种不同的滚动切换'/></a></li>
    </ul>
</div>

<script type="text/javascript" src="js/jquery.gridrotator.js"></script>

$('#ri-grid').gridrotator({
    w1024: {rows: 3, columns: 8},
    w320: {rows: 2, columns: 4},
    w240: {rows: 2, columns: 3},
});

gridrotator.jsAPI教程

参数	描述	默认值
rows	行数	4
columns	列数	10
w1024	w1024 : { rows : 3, columns : 8 },屏幕宽度接近1024	-
w768	w768 : {rows : 3,columns : 7 },	-
w480	w480 : {rows : 3,columns : 5 },	-
w320	w320 : {rows : 2,columns : 4 },	-
w240	w240 : {rows : 2,columns : 3 },	-
step	翻转个数	random
maxStep	最多翻转个数	3
preventClick	禁止点击	true
animType	动画类型	random
animSpeed	动画速度毫秒	800
interval	间隔时间	3000
slideshow	鼠标悬浮没有动画效果	true
onhover	鼠标悬浮不会切换	false