導讀：
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格，像花瓣網、蘑菇街、美麗說等。
不廢話，直接上代碼，整段代碼分為前后兩段代碼，具體代碼如下所示。
前臺：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<?php <br>$category=$this->getMyVal('category',$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打開頁面默認顯示的數據<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為已加載次數,render為渲染接口函數,接受一個dom集合或jquery對象作為參數。通過ajax等異步方法得到的數據可以傳入該接口進行渲染，如 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> |
后臺：
|
1
2
3
4
|
public function actionListXiaohua() {$xiaohuaList=Xiaohua::model()->getXiaohua();//獲取笑話信息echo CJSON::encode($xiaohuaList);} |
js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
;(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){ } //獲取動態(tài)資源函數,必須返回一個磚塊元素集合,傳入參數為加載的次數},//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(){//創(chuàng)建列waterfall.column_num=calculateColumns();//列數//循環(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(){//計算需要的列數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;//沒有元素var $columns = waterfall.$columns;$(elements).each(function(i){if(!setting.auto_imgHeight||setting.insert_type==2){//如果給出了圖片高度，或者是按順序插入，則不必等圖片加載完就能計算列的高度了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(){//圖片加載后才能自動計算出尺寸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等瀏覽器的緩存問題：圖片緩存后不會再觸發(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(){//計算最短的那列的索引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相結合實現下拉淡出瀑布流效果【無需插件】的相關介紹，希望對大家有所幫助，如果大家在使用過程中有任何疑問，請給我留言，小編會及時回復大家的。同時也非常感謝大家對服務器之家網站的支持！
