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无法执行的解决办法
Feb 25 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
微信API接口大全
2015/04/15 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Javascript typeof 用法
2008/12/28 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
全面理解闭包机制
2016/07/11 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
使用python3构建文件传输的方法
2019/02/13 Python
python3实现字符串操作的实例代码
2019/04/16 Python
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
python中%格式表达式实例用法
2021/06/18 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript