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='"+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
出处: /article/5318879.html
由于本人水平有限，文章在表述和代码方面如有不妥之处，欢迎批评指正。留下你的脚印，欢迎评论哦。你也可以关注我，一起学习哦！