下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。
后台用 json 传输数据， 示例程序中只写了示例数组。数据也只设置了两个属性， 需根据实际应用改写。
页面用了 ul li 做为容器， 每个 li 表示一列
php和jquery和ajax实现下拉淡出瀑布流效果（无需插件）
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()getxiaohao($category); //打开页面默认显示的数据
?>
id;?>title);?>
content;?>
分享

后台：
public function actionlistxiaohua() {$xiaohualist=xiaohua::model()->getxiaohua();//获取笑话信息echo cjson::encode($xiaohualist);}
js：
;(function($){var//参数setting={column_width:240,//列宽column_classname:'waterfall_column',//列的类名column_space:2,//列间距cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器img_selector:'img',//要加载的图片的选择器auto_imgheight:true,//是否需要自动计算图片的高度fadein:true,//是否渐显载入fadein_speed:600,//渐显速率，单位毫秒insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入getresource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数},//waterfall=$.waterfall={},//对外信息对象$waterfall=null;//容器waterfall.load_index=0, //加载次数$.fn.extend({waterfall:function(opt){opt=opt||{};setting=$.extend(setting,opt);$waterfall=waterfall.$waterfall=$(this);waterfall.$columns=creatcolumn();render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显waterfall._scrolltimer2=null;$(window).bind('scroll',function(){cleartimeout(waterfall._scrolltimer2);waterfall._scrolltimer2=settimeout(onscroll,300);});waterfall._scrolltimer3=null;$(window).bind('resize',function(){cleartimeout(waterfall._scrolltimer3);waterfall._scrolltimer3=settimeout(onresize,300);});}});function creatcolumn(){//创建列waterfall.column_num=calculatecolumns();//列数//循环创建列var html='';for(var i=0;i ';}$waterfall.prepend(html);//插入列return $('.'+setting.column_classname,$waterfall);//列集合}function calculatecolumns(){//计算需要的列数var num=math.floor(($waterfall.innerwidth())/(setting.column_width+setting.column_space));if(num0){//本身是图片或含有图片var image=new image;var src=$(this)[0].nodename.tolowercase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');image.onload=function(){//图片加载后才能自动计算出尺寸image.onreadystatechange=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.onreadystatechange=function(){//处理ie等浏览器的缓存问题：图片缓存后不会再触发onload事件if(image.readystate == complete){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()=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欢迎提出，脚本之家小编会在第一时间和大家联系的。谢谢！