jQuery图片和HTML元素网格布局插件
jMosaic是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件。可以使用的HTML元素有:img、div、li等。该jQuery插件可以将图片等元素整齐排列,元素的宽高比例不会发生变化。
使用方法
该网格布局插件依赖于jQuery,因此要使用这个插件,首先要引入jQuery和jquery.jMosaic.js以及jquery.jMosaic.css文件。
HTML结构
你可以选择一个块级元素来作为包裹元素,在它里面放入需要进行网格布局的元素:
JAVASCRIPT
之后再页面加载完毕后,可以使用下面的方法来调用插件:
配置参数
方法
via:http://www.htmleaf.com/jQuery/Layout-Interface/201503291593.html
查看演示 下载插件201503291654.zip
使用方法
该网格布局插件依赖于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');
via:http://www.htmleaf.com/jQuery/Layout-Interface/201503291593.html
【jQuery图片和HTML元素网格布局插件】相关文章
2. 响应式jQuery网格布局插件Grid-A-Licious
3. phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...
5. Isotope-jQuery神奇的分类过滤和排序布局插件
7. 一个独特的jQuery图片幻灯片插件AviaSlider
9. jQuery图片模糊插件crossfade.js_dowebok
本文来源:https://www.51html5.com/a1505.html
﹝jQuery图片和HTML元素网格布局插件﹞相关内容
- jQuery图片左右滑动焦点图插件
- jQuery图片放大预览插件
- jQuery图片分组切换焦点图插件
- jQuery图片分组分页插件
- 多图切换jQuery图片滑块插件
- 10款让人惊叹的HTML5/jQuery图片动画特效
- 不用图片和JS,照样创建绚丽的动态CSS3菜单
- 不用图片和JS也可创建绚丽的动态CSS3菜单
- jQuery基于图片的元素背景模糊特效插件
- 不容错过的jQuery图片动画及源码