AJAX+jQuery瀑布流作法-教學撰寫:徐嘉裕Neil hsu

客戶剛好需要做一個瀑布流功能的介面，瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料，像是下圖這樣。

詳細程式結構就不描述了，這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式，之後如果有需要可以再做其他延伸開發，code如下：


HTML結構

<div id='centerbox'>
<div class="row customrow">

<{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}>
<div class="col-md-6 customrowcol-md-6">
<div id='contentbox'>
<{$boxArr.contentbox}>
</div>
</div>
<{/foreach}>

<div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值
<div id='waterfallsflowformboxajax' name='0'></div> //建構瀑布流區

//備註：name='0'為預設值，到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數

</div>
</div>

JS結構


//偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數

$(window).scroll(function(){
var scrollint = $(window).scrollTop();
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
$ajaxsetup = $("#waterfallsflowbox").attr("name");
if(typeof($ajaxsetup) != 'undefined'){
waterfallsflowboxajax($ajaxsetup);
}
}

//AJAX執行區
function waterfallsflowboxajax($ajaxsetup){
var $ajaxsetup_arr = $ajaxsetup.split(','); //切割陣列
var $id=$ajaxsetup_arr[0]; //ajax-ID
var $sortid=$ajaxsetup_arr[1]; //reviewtype

//讀取樣板上#waterfallsflowformboxajax的name值(顯示數量)
var $number=$("#waterfallsflowformboxajax").attr("name");

$.ajax({
url: xoopsjsurl + '/modules/neilwenchuang/ajax.php',
type: 'POST',
data: { id: $id,
sortid:$sortid,
number:$number
},
cache:false,
ifModified :true,
async:false,
success: function(response) {

if(response=="") return false; //空值終止程式
if(response){
setTimeout(function(){
$("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>");
}, 300);
}
},
error: function() {
console.log('ajax error!');
}
})
}
});



ajax.php結構重點

//計算顯示筆數
$numberList=$number+$xoopsModuleConfig['neilwenchuang2'];

//吧樣板上#waterfallsflowformboxajax讀取的name數值+模組預設的顯示筆數存入$numberList變數中

$limit="".$numberList." , ".$xoopsModuleConfig['neilwenchuang2']."";

//資料由第幾筆開始顯示幾筆

$dbneme="neilwenchuangfunction";
$where=" where `enable` = '1' ".$sortidDB." order by wenchuangid DESC limit ".$limit." ";
$neilwenchuangfunctionArr=databasetablewhile($dbneme,$where);

//如果沒值終止程式

if(empty($neilwenchuangfunctionArr)) {

exit; 

}

/*=============程式內容區略===========*/

$box.="
<script type='text/javascript'>
$('#waterfallsflowformboxajax').attr('name','".$numberList."'); 

 //吧目前顯示筆數重新輸出到#waterfallsflowformboxajax的name替換預設值
</script> ";
echo $box;

重點大概就這些，經測試瀏覽器拉到底部後會讀取設定數量的資料，ajax中的js會更改數量的name值，一直重覆讀取到無資料可讀為止，瀑布流就是這樣運作的，有需要的朋友參考看看。

心得撰寫：徐嘉裕 Neil hsu