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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JS实现div居中示例
Apr 17 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
Home Coffee Roasting
2021/03/03 咖啡文化
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
DOM精简教程
2006/10/03 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python如何测试stdout输出
2020/08/10 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
工程开工庆典邀请函
2014/02/01 职场文书
财务人员个人工作总结
2015/02/27 职场文书
学校食堂管理制度
2015/08/04 职场文书
银行工作心得体会范文
2016/01/23 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
Python实现抖音热搜定时爬取功能
2022/03/16 Python
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
vue如何清除浏览器历史栈
2022/05/25 Vue.js