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去除空格的几种方法
Oct 03 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
js实现div色块碰撞
Jan 16 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
使用javascript插入样式
2016/03/14 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
python write无法写入文件的解决方法
2019/01/23 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python实现海螺图片的方法示例
2019/05/12 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
Java里面如何创建一个内部类的实例
2015/01/19 面试题
初级Java程序员面试题
2016/03/03 面试题
英文简历中的自荐信范文
2013/12/14 职场文书
优秀教师主要事迹
2014/02/01 职场文书
函授本科自我鉴定
2014/02/04 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Mysql排序的特性详情
2021/11/01 MySQL