jMosaic是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件。可以使用的HTML元素有:img、div、li等。该jQuery插件可以将图片等元素整齐排列,元素的宽高比例不会发生变化。
使用方法
该网格布局插件依赖于jQuery,因此要使用这个插件,首先要引入jQuery和jquery.jMosaic.js
以及jquery.jMosaic.css
文件。
<link rel="stylesheet" href="css/jquery.jMosaic.css"/ > <script src="js/jquery.js"></script> <script src="js/jquery.jMosaic.js"></script>
HTML结构
你可以选择一个块级元素来作为包裹元素,在它里面放入需要进行网格布局的元素:
<div class="pictures"> <img src="img/one.jpg" width="267" height="400"/> <img src="img/two.jpg" width="500" height="350"/> . . . <img src="img/last.jpg" width="400" height="300"/> </div>
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!
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!