瀑布流效果:jquery通過ajxa配合php后端怎么實現

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



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

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

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

PHP代碼：




下面我就上代碼了

HTML+CSS代碼：




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

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




第一步：ajxa請求數據




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



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

第二步：瀏覽器觸底實現數據加載



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

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

第三步：圖片懶加載



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

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