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 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
JS敏感词过滤代码
Dec 23 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
js实现一个简易计算器
Mar 30 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
PHP无刷新上传文件实现代码
2011/09/19 PHP
php导出excel格式数据问题
2014/03/11 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
微信支付开发维权通知实例
2016/07/12 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python判断无向图环是否存在的示例
2019/11/22 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python时间time模块处理大全
2020/10/25 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
购买大码女装:Lane Bryant
2016/09/07 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
五四青年节活动总结
2015/02/10 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
离婚协议书格式范本
2016/03/18 职场文书
承诺书应该怎么写?
2019/09/10 职场文书