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

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

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

<ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果（无需插件） <li></li> </ul>

JS代码

/* @版本日期: 版本日期: 2012年4月11日 @著作权所有: 1024 intelligence ( http://plete"){image.onload=null;if(setting.insert_type==1){insert($(elements).eq(i),setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素}image=null;}}image.src=src;}else{//不用考虑图片加载if(setting.insert_type==1){insert($(elements).eq(i),setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素}}});}function public_render(elems){//ajax得到元素的渲染接口render(elems,true);}function insert($element,fadein){//把元素插入最短列if(fadein){//渐显$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);}else{//不渐显$element.appendTo(waterfall.$columns.eq(calculateLowest()));}}function insert2($element,i,fadein){//按序轮流插入元素if(fadein){//渐显$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);}else{//不渐显$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));}}function calculateLowest(){//计算最短的那列的索引var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;waterfall.$columns.each(function(i){if($(this).outerHeight()<min){min=$(this).outerHeight();min_key=i;}});return min_key;}function getElements(){//获取资源$.waterfall.load_index++;return setting.getResource($.waterfall.load_index,public_render);}waterfall._scrollTimer=null;//延迟滚动加载计时器function onScroll(){//滚动加载clearTimeout(waterfall._scrollTimer);waterfall._scrollTimer=setTimeout(function(){var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度if(scrollTop>=bottom-windowHeight){render(getElements(),true);}},100);}function onResize(){//窗口缩放时重新排列if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排var $cells=waterfall.$waterfall.find(setting.cell_selector);waterfall.$columns.remove();waterfall.$columns=creatColumn();render($cells,false); //重排已有元素时强制不渐显}})(jQuery);

以上代码分为两部分给大家介绍了PHP和Jquery和ajax实现下拉淡出瀑布流效果，代码比较简单，附有注释，如有bug欢迎提出，小编会在第一时间和大家联系的。谢谢！