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

jquery响应式图片排列插件

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

简要教程

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

引入js文件


HTML结构


  
    
  
...

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