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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
微信小程序左右滑动的实现代码
Dec 15 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 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
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python 字典中取值的两种方法小结
2018/08/02 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python脚本开机自启的实现方法
2019/06/28 Python
python搜索包的路径的实现方法
2019/07/19 Python
在django模板中实现超链接配置
2019/08/21 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
后勤自我鉴定
2013/10/13 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
2014年工程部工作总结
2014/11/25 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Python List remove()实例用法详解
2021/08/02 Python
python​格式化字符串
2022/04/20 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL