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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
用JS实现简单的登录验证功能
Jul 28 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
极典R601SW收音机
2021/03/02 无线电
PHP静态类
2006/11/25 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python实现分段线性插值
2018/12/17 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
春节联欢晚会主持词范文
2014/03/24 职场文书
应聘英语教师求职信
2014/04/24 职场文书
工作简历自我评价
2015/03/11 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python自然语言处理之切分算法详解
2021/04/25 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL