《PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果(无需插件)_.docx》由会员分享，可在线阅读，更多相关《PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果(无需插件)_.docx（14页珍藏版）》请在三一文库上搜索。
1、PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果(无需插件)_ 这篇文章主要介绍了PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】的相关资料,需要的伴侣可以参考下 导读： 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采纳此布局的网站是Pinterest，渐渐在国内流行开来。国内大多数清爽站基本为这类风格，像花瓣网、蘑菇街、漂亮说等。 挺直上代码，整段代码分为前后两段代码，具体代码如下所示。 前台： ?php br$category=$this-get
2、MyVal(category,$_GET);br$xiaohuaList=Xiaohua:model()-getXiaohao($category); /打开页面默认显示的数据br?brbrdiv id=waterfall ?php foreach ($xiaohuaList as $xiaohua):? ?php $q_id=$xiaohua-id;? div class=cell m-bg item-h border_h div class=border-solid-b padding-b-5 text-centerspan class=g-bg glyphicon glyphicon-s
3、unglasses margin-r-5 aria-hidden=true/spanstrong class=color-5 fx_t_?php echo $q_id;?php echo CHtml:encode($xiaohua-title);?/strong/div div class=padding-t-5 fx_c_?php echo $q_id;?php echo $xiaohua-content;?/div div class=padding-t-5 text-rightspan onclick=fx(?php echo $q_id;?); class=fx cursor_p da
4、ta-id=?php echo $q_id;?span class=g-bg glyphicon glyphicon-share-alt margin-r-5 aria-hidden=true/span分享/span/div /div ?php endforeach;? /div script var opt= getResource:function(index,render)/index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem) var html=; var _
5、url=?php echo $this-createUrl(listXiaohua);?; $.ajax( type: get, url: _url, dataType : json, async:false, success: function(data) for( var i in data) var q_id=datai.id; html+=div class=cell m-bg item-h border_hdiv class=border-solid-b padding-b-5 text-centerspan class=g-bg glyphicon glyphicon-sungla
6、sses margin-r-5 aria-hidden=true/spanstrong class=color-5 fx_t_+q_id+datai.title+/strong/divdiv class=padding-t-5 fx_c_+q_id+datai.content+/div +div class=padding-t-5 text-rightspan onclick=fx(+q_id+); class=fx cursor_p data-id=+q_id+span class=g-bg glyphicon glyphicon-share-alt margin-r-5 aria-hidd
7、en=true/span分享/span/div/div; ); return $(html); , column_width:376, column_space:10, auto_imgHeight:true, insert_type:1 $(#waterfall).waterfall(opt); /script 后台： public function actionListXiaohua() $xiaohuaList=Xiaohua:model()-getXiaohua();/猎取笑话信息 echo CJSON:encode($xiaohuaList); js： ;(function($) v
8、ar /参数 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为按序轮番插入 ge
9、tResource: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(); re
10、nder($(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() clearTime
11、out(waterfall._scrollTimer3); waterfall._scrollTimer3=setTimeout(onResize,300); ); ); function creatColumn()/创建列 waterfall.column_num=calculateColumns();/列数 /循环创建列 var html=; for(var i=0;iwaterfall.column_num;i+) html+=div class=+setting.column_className+ style=width:+setting.column_width+px; displa
12、y:inline-block; *display:inline;zoom:1; margin-left:+setting.column_space/2+px;margin-right:+setting.column_space/2+px; vertical-align:top; overflow:hidden/div; $waterfall.prepend(html);/插入列 return $(.+setting.column_className,$waterfall);/列集合 function calculateColumns()/计算需要的列数 var num=Math.floor($
13、waterfall.innerWidth()/(setting.column_width+setting.column_space); if(num1) num=1; /保证至少有一列 return num; function render(elements,fadein)/渲染元素 if(!$(elements).length) return;/没有元素 var $columns = waterfall.$columns; $(elements).each(function(i) if(!setting.auto_imgHeight|setting.insert_type=2)/假如给出了图
14、片高度，或者是按挨次插入，则不必等图片加载完就能计算列的高度了 if(setting.insert_type=1) insert($(elements).eq(i),setting.fadeinfadein);/插入元素 else if(setting.insert_type=2) insert2($(elements).eq(i),i,setting.fadeinfadein);/插入元素 return true;/continue if($(this)0.nodeName.toLowerCase()=img|$(this).find(setting.img_selector).length
15、0)/本身是图片或含有图片 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.fadeinfadein);/插入元素 else if(
16、setting.insert_type=2) insert2($(elements).eq(i),i,setting.fadeinfadein);/插入元素 image=null; image.onreadystatechange=function()/处理IE等扫瞄器的缓存问题：图片缓存后不会再触发onload大事 if(image.readyState = complete) image.onload=null; if(setting.insert_type=1) insert($(elements).eq(i),setting.fadeinfadein);/插入元素 else if(se
17、tting.insert_type=2) insert2($(elements).eq(i),i,setting.fadeinfadein);/插入元素 image=null; image.src=src; else/不用考虑图片加载 if(setting.insert_type=1) insert($(elements).eq(i),setting.fadeinfadein);/插入元素 else if(setting.insert_type=2) insert2($(elements).eq(i),i,setting.fadeinfadein);/插入元素 ); function publ
18、ic_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($el
19、ement,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).outer
20、Height(),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;/延迟滚动加载计时器
21、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.sc
22、rollTop|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相结合实现下拉淡出瀑布流效果【无需插件】的相关介绍，盼望对大家有所关心 .