注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

cooljun的博客

>>静静的心里 ,都有一道最美丽的风景<<

 
 
 

日志

 
 

jQuery插件之-Wookmark瀑布流插件  

2013-07-19 13:32:49|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jQuery插件之-Wookmark瀑布流插件
发表于15 天前 JavaScriptjQuery 暂无评论 ? 被围观 166 views+

瀑布流布局效果目前来说还是挺流行的,从网页到手机应用,都能见到瀑布流的身影。
相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的引用一下,再写那么一两句调用代码,然后就没我们什么事了,瀑布流就这么呈现出来了。
Wookmark这个插件的用法也是相当的简单。

首先,引入JS。

1 <script type="text/javascript" src="jquery.wookmark.js"></script>

HTML代码结构

01 <div id="main" role="main">
02 <ul id="tiles">
03         <!-- These are our grid blocks -->
04 <li><img src="http://www.xiaoningmeng.com/wp-content/themes/HotNewspro/images/load.gif"width="200" height="283" original="images/image_1.jpg">
05  
06 1
07 </li>
08  
09         ......
10         <!-- End of grid blocks -->
11       </ul>
12 </div>

接下来调用
简单调用

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

带参数调用

1 $(function() {
2       $('#tiles li').wookmark({
3         autoResize: true// 当浏览器大小改变时是否自动调整
4         container: $('#main'), // 父容器,这个要注意的一点是该容器需要有 position: relative 属性。
5         offset: 2, // 每个元素之间的距离
6         itemWidth: 210, // 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了
7         resizeDelay: 50 // 自动调整延迟时间,一般情况下不需要设置,默认的就好了。
8       });
9 });

该插件可以配合ajax来实现动态加载数据,不过新增之后需要重新执行一次。如果是采用

1 var handler = $('#tiles li');
2 handler.wookmark(options);

这种方式的在重新绑定前需要执行一下下面的代码,做点清理工作。

1 handler.wookmarkClear();

官方地址:http://www.wookmark.com/jquery-plugin
    官方下载:https://github.com/GBKS/Wookmark-jQuery
   本地下载:Wookmark

  评论这张
 
阅读(23)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018