jQuery实现的瀑布流效果， 向下滚动即时加载内容

下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。

后台用 json 传输数据， 示例程序中只写了示例数组。数据也只设置了两个属性， 需根据实际应用改写。

页面用了 ul li 做为容器， 每个 li 表示一列

<ul id="stage">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

JS代码

/*
@版本日期: 版本日期: 2012年4月11日
@著作权所有: 1024 intelligence ( http://www.1024i.com )

获得使用本类库的许可, 您必须保留著作权声明信息.
报告漏洞，意见或建议, 请联系 Lou Barnes(iua1024@gmail.com)
*/
$(document).ready(function(){
loadMore();
});

$(window).scroll(function(){
// 当滚动到最底部以上100像素时， 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height()<100) loadMore();
});

function loadMore()
{
$.ajax({
url : 'data.php',
dataType : 'json',
success : function(json)
{
if(typeof json == 'object')
{
var oProduct, $row, iHeight, iTempHeight;
for(var i=0, l=json.length; i<l; i++)
{
oProduct = json[i];

// 找出当前高度最小的列, 新内容添加到该列
iHeight = -1;
$('#stage li').each(function(){
iTempHeight = Number( $(this).height() );
if(iHeight==-1 || iHeight>iTempHeight)
{
iHeight = iTempHeight;
$row = $(this);
}
});

$item = $('<div><img src="'+oProduct.image+'" border="0" ><br />'+oProduct.title+'</div>').hide();

$row.append($item);
$item.fadeIn();
}
}
}
});
}

示例网址： http://product.1024i.com/ajax/waterfall/

资源下载： http://download.csdn.net/detail/iua1024/4216228

效果图: