Html5添加自動排列圖片的jquery響應式圖片排列插件教程

1、引入JS文件
<script src="path/to/jquery.min.js" >
<script src="path/to/jquery.row-grid.min.js" >


2、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>


3、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開發者,廣告主提供利益最大化的營銷服務方案。