jquery响应式图片排列插件

当前位置:主页 > jQuery库 > 图片效果 > jquery响应式图片排列插件
jquery响应式图片排列插件
分享:

    插件介绍

    rowGrid.js是一款能自动排列图片的jquery响应式图片排列插件。rowGrid图片排列插件能根据屏幕的大小自动调整每行的图片数量,并可以自由的调整图片的margin等属性。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-24
    阅读:

简要教程

rowGrid.js是一款小巧的、轻量级的、响应式的jQuery图片排列插件。

引入js文件

<script src="path/to/jquery.min.js" >
<script src="path/to/jquery.row-grid.min.js" >
                

HTML结构

<div class="container">
  <div class="item">
    <img src="path/to/image" width="120" height="100" />
  </div>
  <div class="item">
    <img src="path/to/image" width="130" height="100" />
  </div>
  ...
</div>
                

CSS样式

.container {
  background: #eee;
}
/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 10px; 
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}
                

更多信息:http://brunjo.github.io/rowGrid.js/

贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!