首页 > 代码库 > Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO
Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO
要求
必备知识
本文要求基本了解 Html/CSS, JavaScript/JQuery。
开发环境
Dreamweaver CS6 / Chrome浏览器
演示地址
演示地址 资料下载
测试预览截图(抬抬你的鼠标就可以看到演示地址哦):
程序核心代码看这里:
$(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92","#8AC9B5","#604127","#E8A03B","#AF032D","#000000","#506575"]; var tags=["女人","男人","电影","宝儿","安妮海瑟薇","数码"]; for(var i in colors){ var index = Math.round(Math.random() * 59); var img="../Public/Pic/test/"+index+".jpg"; var index2=Math.round(Math.random() * (tags.length-1)); //随机获取一个标签 $(‘#tiles‘).append(" <li style=‘background:"+colors[i]+"‘ class=‘clearFix‘><div style=‘background:#FFF‘><img src=http://www.mamicode.com/‘"+img+"‘ width=‘230‘ /></div><p>是一个熊!!不是一个游戏机!!</p><span>#"+tags[index2]+"</span></li> "); } } //初始化二十条数据 show(); show(); /*瀑布流*/ $(‘#tiles‘).imagesLoaded(function() { var handler = null; // Prepare layout options. var options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $(‘#main‘), // Optional, used for some extra CSS styling offset: 15, // Optional, the distance between grid items itemWidth: 230, // Optional, the width of a grid item direction :‘right‘ }; //瀑布流布局 function applyLayout() { $(‘#tiles‘).imagesLoaded(function() { // Destroy the old handler //是否需要销毁旧的布局 if (handler.wookmarkInstance) { handler.wookmarkInstance.clear(); } // Create a new layout handler. //重新布局瀑布流 handler = $(‘#tiles li‘); handler.wookmark(options); //传入配置参数 }); } //当滚动条高度大于等于最后一个盒子高度 Ajax请求数据 //绑定到scroll事件上 function onScroll(event) { // Check if we‘re within 100 pixels of the bottom edge of the broser window. var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100); if (closeToBottom) { show(); applyLayout(); //执行布局 } }; // Capture scroll event. $(window).bind(‘scroll‘, onScroll); // Call the layout function. handler = $(‘#tiles li‘); //获取盒子 handler.wookmark(options); //初始化瀑布流 }); });
Wookmark-jQuery瀑布流插件介绍和下载:http://www.wookmark.com/jquery-plugin/
官方在线演示地址:http://www.wookmark.com/
关于动态的上传图片将到后续的文章中介绍,有兴趣的博友可以多多关注哦!!
“呵呵”结束了,请原谅本童鞋目前”脑残又缺乏”的语言组织能力,欢迎大家来拍砖来劈斧,由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。
如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。
作者:Li-Cheng
出处: http://www.cnblogs.com/Li-Cheng/p/3807592.html
由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。留下你的脚印,欢迎评论哦。你也可以关注我,一起学习哦!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。