jQuery瀑布流插件Wookmark使用实例


Posted in Javascript onApril 02, 2014

插件下载:https://github.com/GBKS/Wookmark-jQuery
官方主页:http://www.wookmark.com/jquery-plugin

下载插件后,在网页中引用插件的JS文件:

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>

HTML代码结构:
<div id="main">
 <ul id="tiles">
  <li><img src="images/1.jpg"></li>
  <li><img src="images/2.jpg"></li>
  <li><img src="images/3.jpg"></li>
 </ul>
</div>

简单用法:在html文件中添加代码
<script>
 jQuery(function($){
  $('#tiles li').wookmark();
 });
</script>

复杂一点的用法:
<script>
jQuery(function($){
 $('#tiles li').wookmark({ //这里是要实现瀑布流布局的对象
  autoResize: true, //设置成true表示当window窗口大小改变的时候,重新布局
  container: $('#container'), //这个是容器名称 这个容器要必须包含一个css属性"position:relative" 否则你就会看到全部挤在页面的左上角了
  offset: 12, //2个相邻元素之间的间距
  itemWidth: 222, //指定对象的宽度
  resizeDelay: 50 //这是延时效果 默认是50
 });
});
</script>

wookmark同样也可以配合ajax来实现动态加载数据,不过新增之后需要重新执行一次。
var handler = $('#tiles li');
handler.wookmark(options);

如果你在前面已经绑定了事件,在重新执行之前,先清除一下。
handler.wookmarkClear();

看到比较多人在问滚动加载是怎么用的,弄个实例补充说明下:
var handler = null;
//定义基本属性.
var options = {
    autoResize: true,
    container: $('#main'),
    offset: 2,
    itemWidth: 210
};//定义滚动函数
function onScroll(event) {
    //是否到底部(这里是判断离底部还有100px开始载入数据).
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {
        //这里就是AJAX载入的数据
        $.ajax({url:"data.html", dataType:"html", success:function(html){
            //把新数据追加到对象中
            $('#waterfall').append(html);
            //清除原来的定位
            if(handler) handler.wookmarkClear();
            //创建新的wookmark对象
            handler = $('#waterfall li');
            handler.wookmark(options);
            }
        });
    }
};
$(document).ready(new function() {
    //绑定scroll事件.
    $(document).bind('scroll', onScroll);
    //第一次布局.
    handler = $('#waterfall li');
    handler.wookmark(options);
});

Javascript 相关文章推荐
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 #Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 #Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 #Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 #Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 #Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 #Javascript
自己实现ajax封装示例分享
Apr 01 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php获取远程文件大小
2015/10/20 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
php session的应用详细介绍
2017/03/22 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
京东国际站:JOYBUY
2017/11/23 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
工作检讨书大全
2015/01/26 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
学校证明范文
2015/06/24 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书