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

最新推荐文章于 2021-06-09 21:57:41 发布

Angel19951012

最新推荐文章于 2021-06-09 21:57:41 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/Angel19951012/article/details/50482140

版权

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