分享一个jquery动态网格瀑布流的插件—Wookmark

2022-11-17 0 22

分享一个jquery动态网格瀑布流的插件—Wookmark

Wookmark是一个由Wookmark.com设计的jquery动态网格瀑布流插件,用户可以轻松创建他们的网站效果。它具有丰富的参数,使用方便。源代码中包含了许多示例,极大的方便了项目的使用。
分享一个jquery动态网格瀑布流的插件—Wookmark

jquery实例:Wookmark使用方法

引入核心文件

  <!-- 引入jquery -->    < script  src = "../libs/jquery.min.js" ></ script >      <!-- 引入wookmark插件 -->    < script  src = "../jquery.wookmark.js" ></ script >

构建html

< div  id = "main"  role = "main" >          < ul  id = "tiles" >          <!-- These are our grid blocks -->          < li >< img  src = "../sample-images/image_1.jpg"  width = "200"  height = "283" >< p >1</ p ></ li >          < li >< img  src = "../sample-images/image_2.jpg"  width = "200"  height = "300" >< p >2</ p ></ li >          < li >< img  src = "../sample-images/image_3.jpg"  width = "200"  height = "252" >< p >3</ p ></ li >          < li >< img  src = "../sample-images/image_4.jpg"  width = "200"  height = "158" >< p >4</ p ></ li >          < li >< img  src = "../sample-images/image_5.jpg"  width = "200"  height = "300" >< p >5</ p ></ li >          < li >< img  src = "../sample-images/image_6.jpg"  width = "200"  height = "297" >< p >6</ p ></ li >          < li >< img  src = "../sample-images/image_7.jpg"  width = "200"  height = "200" >< p >7</ p ></ li >          < li >< img  src = "../sample-images/image_8.jpg"  width = "200"  height = "200" >< p >8</ p ></ li >          <!-- 可添更多的内容 -->        </ ul >        </ div >

写入JS初始化

$( '#tiles li' ).wookmark();

参数

$( '.myElements' ).wookmark({    align:  'center' ,    autoResize:  false ,    comparator:  null ,    container: $( 'body' ),    direction: undefined,    ignoreInactiveItems:  true ,    itemWidth: 0,    fillEmptySpace:  false ,    flexibleWidth: 0,    offset: 2,    onLayoutChanged: undefined,    outerOffset: 0,    possibleFilters: [],    resizeDelay: 50,    verticalOffset: undefined });

align – “left”, “right”, 和”center”

autoResize – 如果为 “true”, 浏览器改变大小后更新图层

resizeDelay – 默认 “50”毫秒, 浏览器改变大小与图片更新间的间隔时长

comparator -自定义排序函数

container -装载动态网格的元素, 默认 “window”. 如 $(‘myContentGrid’). 该容器需要要CSS属性 “position: relative”.

direction – “left” 或者 “right”, 从左上角还是右上角开始

ignoreInactiveItems – 如果为 “true”,激活的项目是可见的, 用可过滤项目

itemWidth – item的宽度,可以是像素,也可以是百分比。 默认为个项目的宽度。

fillEmptySpace – 如果为 “true”,在每一列的底部会用一个空白的item填满对齐。

flexibleWidth – “true” or “false”, 基于浏览器的大小动态调整item的尺寸。

offset – item与item间横向坚向的间隔, 默认为 2

onLayoutChanged – 图层改变后调用的函数

outerOffset – 默认值 “0”

演示地址:http://www.jqcool.net/demo/201410/jquery-wookmark/

中文文档说明:http://code.ciaoca.com/jquery/wookmark/demo/load-images

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论