本篇文章給大家分享的是有關(guān)如何在thinkPHP項(xiàng)目中實(shí)現(xiàn)一個(gè)瀑布流效果，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
流程:
1. 頁(yè)面初始化時(shí),調(diào)用插件進(jìn)行一次排版；
2. 當(dāng)用戶將滾動(dòng)條拖到底部時(shí),用ajax加載一次數(shù)據(jù),并排版顯示
3. 重復(fù)2,直到無(wú)數(shù)據(jù)
Html代碼:
復(fù)制代碼 代碼如下:
Action代碼：
復(fù)制代碼 代碼如下:
//初始化的數(shù)據(jù)
public function lists(){
$data = D('Info')->order('id DESC')->limit(10)->select();
$this->assign('data', $data);
$this->display();
}
//獲取一次請(qǐng)求的數(shù)據(jù)
public function getMore(){
//獲取最后一個(gè)id
if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);
$data = D('Info')->where($map)->order('id DESC')->limit(10)->select();
$this->ajaxReturn($data);
}
注意:通過(guò)判斷窗口是否滾動(dòng)到頁(yè)面底部來(lái)決定用ajax加載一次數(shù)據(jù),如果不做處理,會(huì)一下子請(qǐng)求很多次,所以,要使用條件來(lái)限制.
這里使用的是往一個(gè)元素上賦值 $("#loading").data("on", true);,在請(qǐng)求期間判斷是true則不繼續(xù)請(qǐng)求,然后在頁(yè)面請(qǐng)求完成后再賦值為false.
以上就是如何在thinkPHP項(xiàng)目中實(shí)現(xiàn)一個(gè)瀑布流效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
