jquery.mosaicflow使用说明_类似Pinterest的响应式图片网格布局

jquery.mosaicflow使用说明

官方网址:http://sapegin.github.io/jquery.mosaicflow/

jquery.mosaicflow使用说明_类似Pinterest的响应式图片网格布局

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

海计划公众号
(0)
上一篇 2020/03/10 23:09
下一篇 2020/03/10 23:09

您可能感兴趣的内容