Introduction?:

Débit en cascade, également connu sous le nom de disposition du débit en cascade. Il s'agit d'une mise en page de site Web populaire. La performance visuelle est une mise en page multi-colonnes irrégulière. à mesure que la barre de défilement de la page défile vers le bas, cette mise en page chargera en permanence les blocs de données et les ajoutera à la queue actuelle. Le premier site Web à adopter cette mise en page a été Pinterest, qui est progressivement devenu populaire dans le pays. La plupart des nouveaux sites Web nationaux sont essentiellement de ce style, comme Huaban.com, Mogujie, Meilishuo, etc.

Pas de bêtises, allez simplement au code. L'ensemble du code est divisé en deux sections de code. Le code spécifique est le suivant.

Réception

<?php <br>$category=$this->getMyVal(&#39;category&#39;,$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打開頁面默認顯示的數(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ù),接受一個dom集合或jquery對象作為參數(shù)。通過ajax等異步方法得到的數(shù)據(jù)可以傳入該接口進行渲染，如 render(elem)
var html=&#39;&#39;;
var _url=&#39;<?php echo $this->createUrl(&#39;listXiaohua&#39;);?>&#39;;
$.ajax({
type: "get",
url: _url,
dataType : "json",
async:false,
success: function(data){
for( var i in data){
var q_id=data[i].id;
html+=&#39;<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_&#39;+q_id+&#39;">&#39;+data[i].title+&#39;</strong></div><div class="padding-t-5 fx_c_&#39;+q_id+&#39;">&#39;+data[i].content+&#39;</div>&#39;
+&#39;<div class="padding-t-5 text-right"><span onclick="fx(&#39;+q_id+&#39;);" class="fx cursor_p" data-id="&#39;+q_id+&#39;"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div>&#39;;
}
}});
return $(html);
},
column_width:376,
column_space:10,
auto_imgHeight:true,
insert_type:1
}
$(&#39;#waterfall&#39;).waterfall(opt);
</script>

Backstage :

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為整個外部容器
img_selector:'img',//要加載的圖片的選擇器
auto_imgHeight:true,//是否需要自動計算圖片的高度
fadein:true,//是否漸顯載入
fadein_speed:600,//漸顯速率，單位毫秒
insert_type:1, //單元格插入方式，1為插入最短那列，2為按序輪流插入
getResource:function(index){ } //獲取動態(tài)資源函數(shù),必須返回一個磚塊元素集合,傳入?yún)?shù)為加載的次數(shù)
},
//
waterfall=$.waterfall={},//對外信息對象
$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); //重排已存在元素時強制不漸顯
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+=&#39;<div class="&#39;+setting.column_className+&#39;" style="width:&#39;+setting.column_width+&#39;px; display:inline-block; *display:inline;zoom:1; margin-left:&#39;+setting.column_space/2+&#39;px;margin-right:&#39;+setting.column_space/2+&#39;px; vertical-align:top; overflow:hidden"></div>&#39;;
}
$waterfall.prepend(html);//插入列
return $(&#39;.&#39;+setting.column_className,$waterfall);//列集合
}
function calculateColumns(){//計算需要的列數(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;//沒有元素
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()==&#39;img&#39;||$(this).find(setting.img_selector).length>0){//本身是圖片或含有圖片
var image=new Image;
var src=$(this)[0].nodeName.toLowerCase()==&#39;img&#39;?$(this).attr(&#39;src&#39;):$(this).find(setting.img_selector).attr(&#39;src&#39;);
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(&#39;opacity&#39;,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(&#39;opacity&#39;,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; //列數(shù)未改變，不需要重排
var $cells=waterfall.$waterfall.find(setting.cell_selector);
waterfall.$columns.remove();
waterfall.$columns=creatColumn();
render($cells,false); //重排已有元素時強制不漸顯
}
})(jQuery);

Ce qui précède est la combinaison de PHP Jquery et ajax introduite par l'éditeur pour obtenir l'effet de flux en cascade déroulant et fondu 【 [Non plug-ins requis], j'espère que cela vous sera utile. Si vous avez des questions pendant l'utilisation, veuillez me laisser un message et l'éditeur vous répondra à temps. Dans le même temps, nous sommes également très reconnaissants du soutien de tous pour le site Web PHP chinois !

Pour plus de PHP Jquery combiné avec ajax pour obtenir un effet de flux en cascade déroulant et fondu [aucun plug-in requis], veuillez faire attention au site Web PHP chinois pour les articles connexes?!