最近接手一個微信端的的項目赦肃，客戶要求在文章列表頁面不要用分頁。然后項目經(jīng)理就交代下來凸主，用瀑布流吧（他對前端并不了解）鸥拧，開發(fā)組的頓姐姐就說是不是無限分頁呀... 然后我就開始自行腦補瀑布流，無限分頁累榜，原理不還是一樣嘛营勤。自行研究了一下，就開始了造輪子之路...
當然壹罚，歡迎來原文看看葛作，原文
1.基本思路
1.1 概述
無限分頁，就是說頁面在不顯示頁碼猖凛，不需要用戶去點擊頁碼赂蠢，使用技術手段實現(xiàn)頁面滾動到某一時刻進行加載下一頁內(nèi)容，并且陳列到頁面上辨泳。這不就是赤裸裸的瀑布流一樣的原理么虱岂。
1.2 腦補一下
先來補充一個sql語句知識玖院，當然這里只做MySQL的實例
select * from imgs limit 0,8;
查詢語句的意思：查詢imgs表的所有內(nèi)容，顯示第一頁的8條內(nèi)容從第一條數(shù)據(jù)開始算起
那么第二頁怎么寫呢：(直接寫出前四頁的sql語句第岖，一起來找規(guī)律)
第一頁 select * from imgs limit 0,8;
結果：
+----+------------+
| id | src |
+----+------------+
| 1 | img/01.jpg |
| 2 | img/02.jpg |
| 3 | img/03.jpg |
| 4 | img/01.jpg |
| 5 | img/01.jpg |
| 6 | img/01.jpg |
| 7 | img/01.jpg |
| 8 | img/01.jpg |
+----+------------+
第二頁 select * from imgs limit 8,8;
結果：
+----+------------+
| id | src |
+----+------------+
| 9 | img/01.jpg |
| 10 | img/01.jpg |
| 11 | img/01.jpg |
| 12 | img/01.jpg |
| 13 | img/01.jpg |
| 14 | img/02.jpg |
| 15 | img/02.jpg |
| 16 | img/02.jpg |
+----+------------+
第三頁 select * from imgs limit 16,8;
結果：
+----+------------+
| id | src |
+----+------------+
| 17 | img/02.jpg |
| 18 | img/02.jpg |
| 19 | img/02.jpg |
| 20 | img/02.jpg |
| 21 | img/02.jpg |
| 22 | img/02.jpg |
| 23 | img/02.jpg |
| 24 | img/03.jpg |
+----+------------+
第四頁 select * from imgs limit 24,8;
結果：
+----+------------+
| id | src |
+----+------------+
| 25 | img/03.jpg |
| 26 | img/03.jpg |
| 27 | img/03.jpg |
| 28 | img/03.jpg |
| 29 | img/03.jpg |
| 30 | img/03.jpg |
| 31 | img/02.jpg |
| 32 | img/02.jpg |
+----+------------+
好了司恳，規(guī)律想必已經(jīng)找到了绣否。不過還是要大致說一下這個sql語句意思管怠。
‘limit’后面有兩個數(shù)字舟茶，這就輸關鍵所在钥勋，第一個數(shù)字是開始的索引值蕊肥，0代表第一個開始滑潘，8代表顯示條數(shù)诗舰，根據(jù)第二個數(shù)字有規(guī)律的改變第一個數(shù)字蔓罚，分頁效果就出來了杠纵。
1.3 js設計原理
頁面總是有個寬度高度的荠耽，頁面加載完畢，上下滾動頁面比藻，有個觸發(fā)事件铝量，每次到一個合適的條件，就觸發(fā)事件進行ajax的請求银亲，并將返回的數(shù)據(jù)加進頁面內(nèi)慢叨，就完成一次加載（或者說完成一次加載下一頁數(shù)據(jù)的請求），在代碼行內(nèi)的注釋進行更詳細的說明
2.代碼
2.1 html代碼
<div class="container">
<div class="wrap">
<!-- 這里放加載的數(shù)據(jù)-->
</div>
<div class="loader">
<!-- 這里放加載時候的加載動畫务蝠，還有加載完畢后提示信息 -->
</div>
</div>
2.2 css代碼
* {
margin: 0;
padding: 0;
}
.container {
width: 640px;
margin: 0 auto;
background: #FFF;
}
.container a {
display: inline-block;
margin: 10px;
}
.container a img {
width: 100%;
}
.loader {
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
/* 預設加載動畫拍谐，css3做的動畫效果 */
.dot {
width: 18px;
height: 18px;
background: #3ac;
border-radius: 100%;
display: inline-block;
animation: slide 1s infinite;
-webkit-animation: slide 1s infinite;
margin-left:5px;
margin-right:5px;
}
.dot:nth-child(1) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
background: #ccc;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
background: #ccc;
}
.dot:nth-child(3) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
background: #ccc;
}
.dot:nth-child(4) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
background: #ccc;
}
.dot:nth-child(5) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
background: #ccc;
}
@-webkit-keyframes slide {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes slide {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
這里放了一個css3做的加載動畫，也是在其他博客上看到的馏段，挺好玩轩拨，拿來用用
2.3 js代碼
$(function () {
//預設全局變量page，就是用來當做'limit'后面的第一個數(shù)字
var page = 0;
//給預設一個全局變量院喜，判斷一次請求是否完畢亡蓉，完畢后才能進行下一次請求，防止多次重復進行請求
var status = true;
//給預設一個全局變量喷舀，判斷數(shù)據(jù)是否已經(jīng)完全加載完畢砍濒，并且已經(jīng)沒有可以再次加載的數(shù)據(jù)，防止已經(jīng)沒有可加載后還會進行請求元咙，
var dataStatu = true;
$(window).scroll(function () {
//滾動的高度
var scrollTop = $(window).scrollTop();
//瀏覽器可視區(qū)域的高度
var screenHei = $(window).height();
//文檔的總高度
var bodyHei = $(document).height();
//計算一個差值,通過這個差值梯影，判斷是否進行ajax請求
var c = bodyHei - screenHei - scrollTop;
if (c < 100) {
//判斷是否可以加載數(shù)據(jù)
if (dataStatu == true && status == true) {
//可以加載數(shù)據(jù)巫员，把status狀態(tài)修改為false
status = false;
//重置容器‘.loader’為空白
$('.loader').html('');
//往容器‘.loader’加進加載動畫
var str = '<div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>';
$('.loader').html(str);
//調(diào)用加載數(shù)據(jù)的函數(shù)
getData();
}
}
});
//頁面加載時先進行一次數(shù)據(jù)請求
getData();
function getData() {
//引用jq的ajax方法庶香，不解釋，好用就行
$.ajax({
//看清楚url帶的get參數(shù)
url: './control/getData.php?page=' + page + '&pageNum=8',
type: 'get',
dataType: 'text',
success: function (data) {
//處理返回的json數(shù)據(jù)
var data = JSON.parse(data);
//請求已經(jīng)發(fā)送简识，并且請求的數(shù)據(jù)已經(jīng)返回赶掖，重置狀態(tài)碼status為false感猛，準備下一次的請求
status = true;
//sql語句原理說過‘limit’后第一個數(shù)字有規(guī)律變化，就在這里
page += 8;
//讓數(shù)據(jù)有個緩沖的過程去過渡一下奢赂，給兩秒時間陪白，兩秒后把請求的數(shù)據(jù)放進網(wǎng)頁里
setTimeout(function(){
//重置容器‘.loader’為空白
$('.loader').html(' ');
//判斷返回的數(shù)據(jù)是否為空，由于是處理json后的數(shù)據(jù)膳灶，當然是數(shù)組咱士，判斷 數(shù)組長度是否為0即可
if (data.length == 0) {
//當所有數(shù)據(jù)已經(jīng)加載完畢，沒有可以在加載的數(shù)據(jù)轧钓，將狀態(tài)碼dataStatu設置為false序厉，不再進行數(shù)據(jù)請求
dataStatu = false;
console.log('沒有數(shù)據(jù)加載了');
//容器‘.loader’填寫數(shù)據(jù)已經(jīng)加載完畢的提示
var str = '沒有可加載數(shù)據(jù)了';
$('.loader').html(str);
} else {
console.log('還有數(shù)據(jù)加載呢.......');
}
//將請求的數(shù)據(jù)遍歷出來，拼接進字符串
var str = '';
for (var i = 0; i < data.length; i++) {
str += '<a href="">';
str += '<img src="' + data[i].src + '" alt="">';
str += '</a>';
}
//將憑借出來的字符串追加進容器內(nèi)
$('.wrap').append(str);
},2000)
},
error: function (statuCode) {
console.log(statuCode);
}
});
}
})
3毕箍、補充說明
對于page弛房，我這里是get傳遞0,8,16,24...實際環(huán)境下，需要問一下后臺人員有木有對page在后臺處理而柑，他們可能需要1,2,3,4,5.....就好了文捶；
還有ajax的url參數(shù)‘pageNum=8’，后臺直接設置的話媒咳，前端就不需要傳送粹排；
總而言之，實際操作時涩澡，還得和后臺人員溝通恨搓，原理就是這么個原理，有不恰當?shù)牡胤椒ぱＭ^路的大神們不吝賜教
