jquery.mosaicflow使用说明
官方网址:http://sapegin.github.io/jquery.mosaicflow/
GitHub:https://github.com/sapegin/jquery.mosaicflow
简介描述:类似Pinterest的响应式图片网格布局
Pinterest就像jQuery的响应式图像或HTML网格一样。
特征
- 简单易用。
- 响应(根据需要显示尽可能多的列)。
- 非常快。
- 仅1.5 KB(缩小gzip)。
- 您可以使用<img>标签或任意HTML。
安装
将jQuery包含jquery.mosaicflow.min.js到您的页面中:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mosaicflow.min.js"></script>
为列布局添加一些CSS并使您的内容响应:
.mosaicflow__column {
float: left;
}
.mosaicflow__item img {
display: block;
width: 100%;
height: auto;
}