小虾虎鱼

小虾虎鱼

jquery瀑布流插件(WookMark)

作者 禾惠 发表于 2012/09/21,最后修改于 2012/09/21

            瀑布流效果现在越来越流行了,应用似乎也越来越广泛了。昨天需要做一个瀑布流效果,自己懒得写也不会写,所以找了一些瀑布流插件,一开始使用了几款瀑布流插件,在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即可。

    

    wookmark插件官方网站:http://www.wookmark.com/jquery-plugin