瀑布流插件WookMark

来源：互联网发布：安装人工智能计算器编辑：程序博客网时间：2024/05/30 04:52

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 为存放所有单元的容器，默认为windowoffset 为每个单元之间垂直与水平方向的间距，默认值为2itemWidth 为每个单元的宽度，默认值应该就是第一个单元的宽度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即可。

0 0