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

参数名	参数说明
itemSelector	class选择器,默认'.item'
columnWidth	一列的宽度
isAnimated	使用jquery的布局变化,默认true
animationOptions	animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth	列的间隙 Integer
isFitWidth	适应宽度Boolean
isResizableL	是否可调整大小 Boolean
isRTL	使用从右到左的布局 Boolean

当需要排列图片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="
";
html+="
";
html+="
";
html+="
";
html+="
";
html+="
";
html+="
";
$container.append(html).masonry("reload");
jLoading.hide();
}


});

来自： http://www.0773linji.com/jquery_plugs/jq_Masonry/