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([e-mail])*/$(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

效果图: