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

背归鸿

博闻强记,厚积薄发!

 
 
 

日志

 
 

jquery瀑布流插件(WookMark)  

2013-03-14 21:40:29|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
       瀑布流效果现在越来越流行了,应用似乎也越来越广泛了。昨天需要做一个瀑布流效果,自己懒得写也不会写,所以找了一些瀑布流插件,一开始使用了几款瀑布流插件,在IE6/7表现的不是很好(有可能是我用的不对),后来使用了WookMark这款插件,下面介绍一下这款插件。
    WookMark是一款基于jquery的瀑布流插件,使用起来也非常的简单:

    1、调用jquery库;
    2、引用jquery.wookmark.min.js文件(可以去 https://github.com/GBKS/Wookmark-jQuery 下载 );
    3、开始应用wookmark,代码如下:

<script type="text/javascript">
    $('#myContent li').wookmark();
</script>


    完整的wookmark的参数如下:

$('#myContent li').wookmark({
    container: $('#myContent'),
    offset: 0,
    itemWidth: 196,
    autoResize: true
});


    $('#myContent li')为查找所有单元

    container 为存放所有单元的容器,默认为window

    offset 为每个单元之间垂直与水平方向的间距,默认值为2

    itemWidth 为每个单元的宽度,默认值应该就是第一个单元的宽度

    autoResize 为当浏览器窗口发生变化是否自动调整大小,布尔值,默认为false

   resizeDelay 为自动调整延迟,默认值为50
           
    需要注意的是:需要给容器(ID为myContent这个标签)添加 position:relative;样式

   在使用过程中可能存在的问题:

    1、使用下面的代码时发现在其他浏览器都能正常显示,而在谷歌浏览器中无论怎么设置参数在同一列的图片都重叠在一起了

$(function(){
    $("#myContent").wookmark();
})


    上面的那种情况不知道是不是webkit内核浏览器的BUG,使用这种方法是无法获取到图片的高度的,解决的方法如下(需要等页面加载完之后才能获取到图片的高度):

$(function(){
    $(window).load(function(){
        $("#myContent").wookmark();
    });
})


    2、在IE6/7中不能正常的显示,而在IE8+等其他浏览器均正常,解决的方法:将autoResize设置为true即可。
  评论这张
 
阅读(1984)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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