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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
iview实现图片上传功能
2020/06/29 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
Python读写Redis数据库操作示例
2014/03/18 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python实现单词翻译功能
2017/06/06 Python
Python字符串处理实现单词反转
2017/06/14 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
教师专业自荐书范文
2014/02/10 职场文书
心理健康日活动总结
2014/05/08 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
工作态度不好检讨书
2015/05/06 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技