瀑布流插件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即可。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值