html5 网格排列图片,jQuery图片和HTML元素网格布局插件

jMosaic是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件。可以使用的HTML元素有：img、div、li等。该jQuery插件可以将图片等元素整齐排列，元素的宽高比例不会发生变化。

使用方法

该网格布局插件依赖于jQuery，因此要使用这个插件，首先要引入jQuery和jquery.jMosaic.js以及jquery.jMosaic.css文件。

HTML结构

你可以选择一个块级元素来作为包裹元素，在它里面放入需要进行网格布局的元素：

. . .

JAVASCRIPT

之后再页面加载完毕后，可以使用下面的方法来调用插件：

$('.pictures').jMosaic();

如果图片或HTML元素设置了尺寸，你可以使用$(document).ready()。

如果图片或HTML元素没有设置宽度和高度，你可以使用$(window).load()。

你可以在浏览器窗口改变时对该插件进行更新，$(window).resize()。

配置参数

你可以在插件的初始化方法中插入下面的参数：

items_type：元素的选择器类型，默认为img。

min_row_height：行的最小高度，默认值为150。

margin：元素之间的空隙，默认值为0。

is_first_big：第一行以大图显示，默认值为false。

方法

该网格布局插件有一个可用的方法：

clear：从插件中情况选择器。

$('.pictures').jMosaic('clear');

Enjoy!