当前位置:主页 > 网页特效 > 图片代码 >

jquery响应式图片排列插件

发布时间:2018/08/25 来源:未知 浏览: 关键词:响应式 jquery 图片排列 
jquery响应式图片排列插件 jquery响应式图片排列插件
阿里云

简要教程

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

引入js文件

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

HTML结构

<divclass="container">
  <divclass="item">
    <imgsrc="path/to/image"width="120"height="100"/>
  </div>
  <divclass="item">
    <imgsrc="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/

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top