Js和CSS响应式网格布局插件

演示  website 下载

介绍

这是一个非常简单的自定义标签，使用JavaScript和CSS来实现基本的、响应式网格布局。

使用方法

1. 在页面中加载布局插件。

<script src='min.js'></script>

2. 添加网格布局代码。

<masonry-rows>
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>

3. 确定网格最小宽度。

<masonry-rows min-width="20em">
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>

4. 确定网格之间的间距。

<masonry-rows gap=".5em">
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>