jQuery向下滾動(dòng)即時(shí)加載內(nèi)容實(shí)現(xiàn)的瀑布流效果
下拉滾動(dòng)條或鼠標(biāo)滾輪滾動(dòng)到頁(yè)面底部時(shí), 動(dòng)態(tài)即時(shí)加載新內(nèi)容。
后臺(tái)用 json 傳輸數(shù)據(jù), 示例程序中只寫(xiě)了示例數(shù)組。數(shù)據(jù)也只設(shè)置了兩個(gè)屬性, 需根據(jù)實(shí)際應(yīng)用改寫(xiě)。
頁(yè)面用了 ul li 做為容器, 每個(gè) li 表示一列
<ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax實(shí)現(xiàn)下拉淡出瀑布流效果(無(wú)需插件) <li></li> </ul>
JS代碼
/* @版本日期: 版本日期: 2012年4月11日 @著作權(quán)所有: 1024 intelligence ( http://www.1024i.com ) 獲得使用本類庫(kù)的許可, 您必須保留著作權(quán)聲明信息. 報(bào)告漏洞,意見(jiàn)或建議, 請(qǐng)聯(lián)系 Lou Barnes(iua1024@gmail.com) */ $(document).ready(function(){ loadMore(); }); $(window).scroll(function(){ // 當(dāng)滾動(dòng)到最底部以上100像素時(shí), 加載新內(nèi)容 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]; // 找出當(dāng)前高度最小的列, 新內(nè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(); } } } }); }
下面再給大家分享一段代碼:PHP Jquery和ajax相結(jié)合實(shí)現(xiàn)下拉淡出瀑布流效果
我的風(fēng)格,廢話不多說(shuō),感興趣的朋友直接看下文代碼:
前臺(tái):
<br><?php <br>$category=$this->getMyVal('category',$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打開(kāi)頁(yè)面默認(rèn)顯示的數(shù)據(jù)<br>?><br><br><div 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-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong 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-right"><span onclick="fx(<?php echo $q_id;?>);" class="fx cursor_p" data-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為已加載次數(shù),render為渲染接口函數(shù),接受一個(gè)dom集合或jquery對(duì)象作為參數(shù)。通過(guò)ajax等異步方法得到的數(shù)據(jù)可以傳入該接口進(jìn)行渲染,如 render(elem) var html=''; var _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=data[i].id; html+='<div class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_'+q_id+'">'+data[i].title+'</strong></div><div class="padding-t-5 fx_c_'+q_id+'">'+data[i].content+'</div>' +'<div class="padding-t-5 text-right"><span onclick="fx('+q_id+');" class="fx cursor_p" data-id="'+q_id+'"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div>'; } }}); return $(html); }, column_width:376, column_space:10, auto_imgHeight:true, insert_type:1 } $('#waterfall').waterfall(opt); </script>
后臺(tái):
public function actionListXiaohua() { $xiaohuaList=Xiaohua::model()->getXiaohua();//獲取笑話信息 echo CJSON::encode($xiaohuaList); }
js:
;(function($){ var //參數(shù) setting={ column_width:240,//列寬 column_className:'waterfall_column',//列的類名 column_space:2,//列間距 cell_selector:'.cell',//要排列的磚塊的選擇器,context為整個(gè)外部容器 img_selector:'img',//要加載的圖片的選擇器 auto_imgHeight:true,//是否需要自動(dòng)計(jì)算圖片的高度 fadein:true,//是否漸顯載入 fadein_speed:600,//漸顯速率,單位毫秒 insert_type:1, //單元格插入方式,1為插入最短那列,2為按序輪流插入 getResource:function(index){ } //獲取動(dòng)態(tài)資源函數(shù),必須返回一個(gè)磚塊元素集合,傳入?yún)?shù)為加載的次數(shù) }, // waterfall=$.waterfall={},//對(duì)外信息對(duì)象 $waterfall=null;//容器 waterfall.load_index=0, //加載次數(shù) $.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); //重排已存在元素時(shí)強(qiáng)制不漸顯 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(){//創(chuàng)建列 waterfall.column_num=calculateColumns();//列數(shù) //循環(huán)創(chuàng)建列 var html=''; for(var i=0;i<waterfall.column_num;i++){ html+='<div class="'+setting.column_className+'" style="width:'+setting.column_width+'px; display: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(){//計(jì)算需要的列數(shù) var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space)); if(num<1){ num=1; } //保證至少有一列 return num; } function render(elements,fadein){//渲染元素 if(!$(elements).length) return;//沒(méi)有元素 var $columns = waterfall.$columns; $(elements).each(function(i){ if(!setting.auto_imgHeight||setting.insert_type==2){//如果給出了圖片高度,或者是按順序插入,則不必等圖片加載完就能計(jì)算列的高度了 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);//插入元素 } return true;//continue } if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>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(){//圖片加載后才能自動(dòng)計(jì)算出尺寸 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等瀏覽器的緩存問(wèn)題:圖片緩存后不會(huì)再觸發(fā)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(){//計(jì)算最短的那列的索引 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;//延遲滾動(dòng)加載計(jì)時(shí)器 function onScroll(){//滾動(dòng)加載 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;//滾動(dòng)條距離 var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度 if(scrollTop>=bottom-windowHeight){ render(getElements(),true); } },100); } function onResize(){//窗口縮放時(shí)重新排列 if(calculateColumns()==waterfall.column_num) return; //列數(shù)未改變,不需要重排 var $cells=waterfall.$waterfall.find(setting.cell_selector); waterfall.$columns.remove(); waterfall.$columns=creatColumn(); render($cells,false); //重排已有元素時(shí)強(qiáng)制不漸顯 } })(jQuery);
以上代碼分為兩部分給大家介紹了PHP和Jquery和ajax實(shí)現(xiàn)下拉淡出瀑布流效果,代碼比較簡(jiǎn)單,附有注釋,如有bug歡迎提出,腳本之家小編會(huì)在第一時(shí)間和大家聯(lián)系的。謝謝!
- Jquery瀑布流插件使用介紹
- jQuery 瀑布流 浮動(dòng)布局(一)(延遲AJAX加載圖片)
- jQuery Masonry瀑布流插件使用詳解
- jQuery瀑布流插件Wookmark使用實(shí)例
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- jQuery 瀑布流 絕對(duì)定位布局(二)(延遲AJAX加載圖片)
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery.lazyload+masonry改良圖片瀑布流代碼
- jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載瀑布流
相關(guān)文章
PHP開(kāi)啟目錄引索+fancyindex漂亮目錄瀏覽帶搜索功能
這篇文章主要介紹了PHP開(kāi)啟目錄引索+fancyindex漂亮目錄瀏覽帶搜索功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Yii框架ACF(accessController)簡(jiǎn)單權(quán)限控制操作示例
這篇文章主要介紹了Yii框架ACF(accessController)簡(jiǎn)單權(quán)限控制操作,結(jié)合實(shí)例形式分析了Yii框架簡(jiǎn)單權(quán)限控制操作參數(shù)設(shè)置與使用技巧,需要的朋友可以參考下2019-04-04php下獲取Discuz論壇登錄用戶名、用戶組、用戶ID等信息的實(shí)現(xiàn)代碼
前面有一篇文章講過(guò)自己從cookie和discuz數(shù)據(jù)庫(kù)中取用戶名、用戶組、用戶ID等信息,但那個(gè)并不一定準(zhǔn)確,因?yàn)閐iscuz登錄時(shí)會(huì)使用COOKIE中的auth值來(lái)動(dòng)態(tài)登錄,而cookie信息是滯后的,所以獲取到的信息并不完全準(zhǔn)確。2010-12-12PHP文件上傳小程序 適合初學(xué)者學(xué)習(xí)!
這篇文章主要為大家詳細(xì)介紹了PHP文件上傳小程序,給初學(xué)者提供的PHP文件上傳小程序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05php開(kāi)發(fā)留言板的CRUD(增,刪,改,查)操作
php學(xué)習(xí)中,以開(kāi)放一個(gè)留言本作為php的入門(mén)資料還是不錯(cuò)的。2012-04-04使用PHP處理數(shù)據(jù)庫(kù)數(shù)據(jù)如何將數(shù)據(jù)返回客戶端并顯示當(dāng)前狀態(tài)
這篇文章給大家介紹使用php處理大量數(shù)據(jù),每處理一個(gè)數(shù)據(jù)返回客戶端顯示當(dāng)前狀態(tài)的方法,對(duì)PHP處理數(shù)據(jù)庫(kù)數(shù)據(jù)返回客戶端并顯示當(dāng)前狀態(tài)的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02