瀑布流效果顧名思義，就是像瀑布一樣模擬水流的方向由上到下的將圖片慢慢的加載展示出來。瀑布流分為等高瀑布流和等寬瀑布流；瀑布流的應(yīng)用場景常見于對多圖片的展示，為了緩解服務(wù)器的壓力，將圖片分批進行展示；就拿百度圖片來說，應(yīng)用的就是等高瀑布流的展示效果；所有的圖片高度相同；隨著瀏覽器的下拉，當(dāng)Y軸下拉框觸底的時候就加載更多的圖片；等寬瀑布流從視覺角度來說，更接近于現(xiàn)實生活中的瀑布效果；每一個圖片寬度相同，高度錯落有致；比如，我們平時在展示網(wǎng)站建設(shè)案例的時候，就可以利用上；視覺上還是很不錯的。效果如下:



本期建站公司來分享的是：jquery通過ajxa配合php后端怎么實現(xiàn)瀑布流效果的？

首先，我們需要了解下瀑布流的實現(xiàn)原理是怎么樣的？瀑布流效果實現(xiàn)的基本原理：隨著頁面的每次滾動觸底操作觸發(fā)ajxa向后臺請求數(shù)據(jù)，然后將請求回來的數(shù)據(jù)渲染到頁面上；每進行一次滾動觸底事件的產(chǎn)生就發(fā)生一次ajxa數(shù)據(jù)請求，然后渲染數(shù)據(jù)；直到不在返回數(shù)據(jù)，則結(jié)束。所以基本步驟就是：1、判斷頁面觸底；2、ajxa發(fā)送請求；3、處理數(shù)據(jù)，渲染頁面；下面我們來一步步的進行實現(xiàn)。

在實現(xiàn)瀑布流效果之前，我們需要先準(zhǔn)備好數(shù)據(jù)；這里的數(shù)據(jù)準(zhǔn)備也就是php后端對數(shù)據(jù)的實現(xiàn)。數(shù)據(jù)讀取的實現(xiàn)其實也就是從數(shù)據(jù)庫中讀取數(shù)據(jù)，然后通過ajxa請求返回給瀏覽器；其中要留意的是，在數(shù)據(jù)庫查詢數(shù)據(jù)的時候，每次查詢的數(shù)據(jù)要保證不一樣，我們就可以通過sql語句中l(wèi)imit來進行限制：比如說：(limit m n);m和n是通過get方式從前臺傳遞過來的；n表示：每次請求多少個？m表示：每次從第幾個開始讀??？只要保證m不同，就可以保證讀取的數(shù)據(jù)不同了。m和n的控制，既可以寫在后臺進行處理，也可以在前臺進行處理；每請求一次數(shù)據(jù)，就對m進行操作：m=m+n;這樣下次的m就是不一樣的值了。數(shù)據(jù)準(zhǔn)備好之后，就可以開始實現(xiàn)功能了。

PHP代碼：




下面我就上代碼了

HTML+CSS代碼：




html+css比較簡單，就是定義一個存放圖片的大容器；div.waterfall；每一個圖片盒子會被追加到這個div里

瀑布流效果的實現(xiàn)是通過jquery來處理的；分為不同的步驟來進行實現(xiàn)：我們先定義基本需要的參數(shù)：比如顯示的列數(shù)，列與列之間的距離、接收返回的數(shù)據(jù)等




第一步：ajxa請求數(shù)據(jù)




通過ajxa我們可以通過php后臺請求到數(shù)據(jù)庫里的數(shù)據(jù)；需要根據(jù)自身需要的參數(shù)來進行返回：其中：m和n不可少；請求到數(shù)據(jù)了，就可以渲染到頁面上了；



通過上面可以得出，瀑布流效果的核心難點在于：如何對圖片進行排列；其基本的邏輯就是，先對第一排進行布局；布局好第一排之后，準(zhǔn)備布局第二排；第二排第一個擺放非常重；第二排的第一個要擺放在第一排中高度最低的一個；打個比方吧：第一排4個序號為：vik1,vik2,vik3,vik4;第一排布局好后，假如vik3的高度最低，那么第二排的vik5就擺放在vik3的下面了；這個時候，vik1,vik2,(vik3+vik5),vik4;這4個又形成了新的高度，這個時候?qū)@個高度再進行判斷，找出最低的那個，假如是：vik4;那么第二排的第二個vik6就會擺放到vik4的下面，這時候：vik1,vik2,(vik3+vik5),(vik4+vik6);又形成了新的高度....依次進行循環(huán)....就這樣直到最后的一個圖片擺放完成；首次渲染的效果就算完成了。通過getImageList();函數(shù)的調(diào)用就可以完成首次頁面的渲染了。

第二步：瀏覽器觸底實現(xiàn)數(shù)據(jù)加載



頁面觸底的原理其實很簡單：當(dāng)可視區(qū)的高度+瀏覽器滾動條被卷進去的高度  == 整個頁面的高度的時候，這個時候就表示頁面觸底了；每一次觸底就發(fā)送依次ajax請求，根據(jù)不同的m值來獲取不同的數(shù)據(jù)，然后通過showImg()函數(shù)的處理渲染到頁面上；這里注意的時候，需要對m值進行處理：m=m+n;以保證每次請求到不同的數(shù)據(jù)；

為了緩解服務(wù)器的壓力；我們還可以加入：圖片懶加載的功能；

第三步：圖片懶加載



圖片懶加載其目的就是為了緩解服務(wù)器的壓力；分批請求的同時分配進行加載；可以先使用純色的色塊進行占位；當(dāng)其中某一個元素到達可視區(qū)范圍了，再將圖片地址渲染上去；

經(jīng)過以上的步驟，等寬瀑布流的功能就實現(xiàn)了。原創(chuàng)不易，各位看官煩請高抬貴手了，武漢建站公司小編感謝了！