Html5添加自动排列图片的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;
}

.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开发者,广告主提供利益最大化的营销服务方案。