Html5添加自动排列图片的jquery响应式图片排列插件教程

时间：2016-01-08 13:02:43 阅读：150 评论：0 收藏：0 [点我收藏+]

标签：

一、引入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;
}

.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;
}

.last-row, .last-row ~ .item {
margin-bottom: 0;
}

KeyMob平台是一家移动端广告平台,专注手机广告优化,为app开发者,广告主提供利益最大化的营销服务方案。

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）