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 相关文章推荐
探讨js中的双感叹号判断
Nov 11 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
微信小程序实现登录注册功能
Dec 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
PHP中显示格式化的用户输入
2006/10/09 PHP
php防注
2007/01/15 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php类自动加载器实现方法
2015/07/28 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
详解vue中组件参数
2018/07/09 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python排序方法实例分析
2015/04/30 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python ldap实现登录实例代码
2016/09/30 Python
python文件拆分与重组实例
2018/12/10 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
初中生物教学反思
2014/01/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
python基础入门之字典和集合
2021/06/13 Python