jQuery向下滚动即时加载内容实现的瀑布流效果_php实例_脚本之家

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

/* @版本日期: 版本日期: 2012年4月11日 @着作权所有: 1024 intelligence ( http://www.1024i.com ) 获得使用本类库的许可, 您必须保留着作权声明信息. 报告漏洞,意见或建议, 请联系 Lou Barnes */ $.ready{ loadMore.scroll{ // 当滚动到最底部以上100像素时, 加载新内容 if  - $ - $ loadMore; function loadMore() { $.ajax({ url : 'data.php', dataType : 'json', success : function { if(typeof json == 'object') { var oProduct, $row, iHeight, iTempHeight; for(var i=0, l=json.length; iiTempHeight) { iHeight = iTempHeight; $row = $; $item = $('
'+oProduct.title+'').hide; $item.fadeIn; } 

后台:

前台:

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

public function actionListXiaohua() {$xiaohuaList=Xiaohua::model;//获取笑话信息echo CJSON::encode;} 
;{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{ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数},//waterfall=$.waterfall={},//对外信息对象$waterfall=null;//容器waterfall.load_index=0, //加载次数$.fn.extend({waterfall:function{opt=opt||{};setting=$.extend;$waterfall=waterfall.$waterfall=$;waterfall.$columns=creatColumn.find(setting.cell_selector).detach; //重排已存在元素时强制不渐显waterfall._scrollTimer2=null;$.bind{clearTimeout(waterfall._scrollTimer2);waterfall._scrollTimer2=setTimeout;waterfall._scrollTimer3=null;$.bind{clearTimeout(waterfall._scrollTimer3);waterfall._scrollTimer3=setTimeout;function creatColumn(){//创建列waterfall.column_num=calculateColumns();//列数//循环创建列var html='';for(var i=0;i';}$waterfall.prepend;//插入列return $('.'+setting.column_className,$waterfall);//列集合}function calculateColumns(){//计算需要的列数var num=Math.floor(($waterfall.innerWidth/(setting.column_width+setting.column_space));if{ num=1; } //保证至少有一列return num;}function render{//渲染元素if return;//没有元素var $columns = waterfall.$columns;$.each{if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度,或者是按顺序插入,则不必等图片加载完就能计算列的高度了if(setting.insert_type==1){insert,setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2,i,setting.fadein&&fadein);//插入元素}return true;//continue}if[0].nodeName.toLowerCase.find.length>0){//本身是图片或含有图片var image=new Image;var src=$[0].nodeName.toLowerCase.attr.find.attr;image.onload=function(){//图片加载后才能自动计算出尺寸image.onreadystatechange=null;if(setting.insert_type==1){insert,setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2,i,setting.fadein&&fadein);//插入元素}image=null;}image.onreadystatechange=function(){//处理IE等浏览器的缓存问题:图片缓存后不会再触发onload事件if(image.readyState == "complete"){image.onload=null;if(setting.insert_type==1){insert,setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2,i,setting.fadein&&fadein);//插入元素}image=null;}}image.src=src;}else{//不用考虑图片加载if(setting.insert_type==1){insert,setting.fadein&&fadein);//插入元素}else if(setting.insert_type==2){insert2,i,setting.fadein&&fadein);//插入元素}}});}function public_render{//ajax得到元素的渲染接口render;}function insert{//把元素插入最短列if{//渐显$element.css.appendTo(waterfall.$columns.eq.fadeTo(setting.fadein_speed,1);}else{//不渐显$element.appendTo(waterfall.$columns.eq;}}function insert2{//按序轮流插入元素if{//渐显$element.css.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,min_key=0;waterfall.$columns.each{if=bottom-windowHeight){render;}},100);}function onResize(){//窗口缩放时重新排列if==waterfall.column_num) return; //列数未改变,不需要重排var $cells=waterfall.$waterfall.find(setting.cell_selector);waterfall.$columns.remove();waterfall.$columns=creatColumn();render; //重排已有元素时强制不渐显}}); 

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

JS代码

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

我的风格,废话不多说,感兴趣的朋友直接看下文代码:

js:

$category=$this->getMyVal;
$xiaohuaList=Xiaohua::model()->getXiaohao; //打开页面默认显示的数据
?>

id;?>content;?>分享var opt={getResource:function{//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染,如 rendervar html='';var _url='<?php echo $this->createUrl;?>';$.ajax({type: "get",url: _url,dataType : "json",async:false,success: function{for{var q_id=data[i].id;html+='<div ><div ><span aria-hidden="true"></span><strong >'+data[i].title+'</strong></div><div >'+data[i].content+'</div>'+'<div ><span onclick="fx;" data-><span aria-hidden="true"></span>分享</span></div></div>';}}});return $;},column_width:376,column_space:10,auto_imgHeight:true,insert_type:1}$.waterfall; 

下面再给大家分享一段代码:PHP
Jquery和ajax相结合实现下拉淡出瀑布流效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注