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现实多行信息
Aug 26 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
ionic3 懒加载
2017/08/16 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
layui的select联动实现代码
2019/09/28 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
清洁工表扬信
2014/01/08 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB