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 14 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
页面点击小红心js实现代码
May 26 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
React 高阶组件HOC用法归纳
Jun 13 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数据加密详解
2013/06/18 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
用python读写excel的方法
2014/11/18 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python聊天室程序(基础版)
2018/04/01 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 实现识别图片上的数字
2019/07/30 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
打架检讨书50字
2014/01/11 职场文书
九年级化学教学反思
2014/01/28 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
旅游项目合作意向书
2015/05/08 职场文书
无工作证明怎么写
2015/06/15 职场文书
小学毕业感言100字
2015/07/30 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS