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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

图片列表代码

<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.erdangjiade.com/js/442.html" target="_blank" ><img src='images/medium/1.jpg'  title='jQuery圆角插件：jquery.corners.js'/></a></li>
        <li><a href="http://www.erdangjiade.com/js/443.html" target="_blank" ><img src='images/medium/2.jpg'  title='jQuery仿蜜淘在线客服'/></a></li>
        <li><a href="http://www.erdangjiade.com/js/444.html" target="_blank" ><img src='images/medium/3.jpg'  title='jQuery+turn.js翻书、文档和杂志'/></a></li>
        <li><a href="http://www.erdangjiade.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教程