rowGrid.js响应式图片水平对齐插件

来源:https://www.sucaihuo.com/js/680.html 2016-01-16 18:51浏览(1425) 收藏

本文演示了rowGrid.js图片自适应对齐展示,引入该插件后,会自动算出各图片之间间距。而且支持手机端等移动设备。
rowGrid.js响应式图片水平对齐插件
分类:图片代码 > 图片插件 难易:中级
查看演示 下载资源 下载积分: 20 积分

图片列表html代码

<div class="container">
    <div class="item">
        <a href='http://www.sucaihuo.com/js/180.html' target='_blank'> <img src='images/1.jpg' alt='php整理常用时间戳和日期'  width="220" height="200" /> </a>
    </div>
    <div class="item">
        <a href='http://www.sucaihuo.com/js/181.html' target='_blank'> <img src='images/2.jpg' alt='PHP Curl模拟POST和GET传参方式'  width="220" height="200" /> </a>
    </div>
</div>

引入并调用jquery.row-grid.js图片自适应插件

<script src="jquery.row-grid.js"></script>
$(".container").rowGrid({
    itemSelector: ".item", 
    minMargin: 10, 
    maxMargin: 25, 
    firstItemClass: "first-item"
});

jquery.row-grid.jsAPI教程

参数 描述 默认值
minMargin 最小间距 -
maxMargin 最大间距 -
resize 是否自动调整大小 true
lastRowClass 最后一排样式 last-row
firstItemClass 第一个样式 -
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2