masonry 瀑布流布局插件使用说明

当需要排列图片div时
需要调用
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240
});
});
调用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )
例如：
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( 'layout', $items, callback )// 指定项目的布局
.masonry( 'option', options ) //设置option
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目

$(function(){
var $container = $('#containerPic'),sTimer;
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.itemPic',
columnWidth: 200
});
});
$(window).scroll(function scrollHandler(){
clearTimeout(sTimer);
sTimer = setTimeout(function() {
if(window.loaded == 1){$(window).unbind("scroll", scrollHandler);}
var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();
if(t+c >= $container.offset().top+$container.height()){loadMore();}
}, 100);
});
var jLoading = $('#loading');
function loadMore()
{
var html="<div class='itemPic'><div class='pic'><img src='images/1.jpg' height='187' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/2.jpg' height='378' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/3.jpg' height='393' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/4.jpg' height='276' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/5.jpg' height='435' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/6.jpg' height='387' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/7.jpg' height='387' /></div></div>";
$container.append(html).masonry("reload");
jLoading.hide();
}

});