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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
微信小程序日历插件代码实例
Dec 04 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
给多个地址发邮件的类
2006/10/09 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中文编码那些事
2014/06/25 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python基于递归解决背包问题详解
2019/07/03 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
家长对孩子评语
2014/01/30 职场文书
班队活动设计方案
2014/01/30 职场文书
2014政务公开实施方案
2014/02/19 职场文书
春季防火方案
2014/05/10 职场文书
宿舍标语大全
2014/06/19 职场文书
药店促销活动策划方案
2014/08/24 职场文书
值班管理制度范本
2015/08/06 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电