• <dd id="irhdl"><noscript id="irhdl"></noscript></dd>
  • <progress id="irhdl"></progress>
  • 武漢網站建設
    NEWS
    新聞觀點

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

    作者:網站開發 | 瀏覽量: | 來源:網站開發 | 更新時間:2021-07-12 | 當前欄目:武漢網站建設
    瀑布流效果顧名思義,就是像瀑布一樣模擬水流的方向由上到下的將圖片慢慢的加載展示出來。瀑布流分為等高瀑布流和等寬瀑布流;瀑布流的應用場景常見于對多圖片的展示,為了緩解服務器的壓力,將圖片分批進行展示;就拿某度圖片來說,應用的就是等高瀑布流的展示效果;所有的圖片高度相同;隨著瀏覽器的下拉,當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代碼:

    瀑布流php代碼


    下面我就上代碼了

    HTML+CSS代碼:


    HTML+CSS代碼

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

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

    定義基本參數


    第一步:ajxa請求數據

    ajxa請求數據
    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;以保證每次請求到不同的數據;

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

    第三步:圖片懶加載

    第三步:圖片懶加載


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

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

    溫馨提示:

    1、凡本網注明“來源:***(非盈科互動)”的作品,均轉載自其它媒體,轉載目的在于傳遞更多的信息,并不代表本網贊同其觀點和對其真實性負責。

    2、如因作品內容、版權和其它問題需要同本網聯系的,請在30日內進行。

    征稿啟事:

    為了更好的發揮盈科互動新聞資訊平臺價值,促進諸位自身發展以及業務拓展,更好地為企業及個人提供服務,盈科互動誠征各類稿件,歡迎實力來稿。

    文章TAG:

    瀑布流 jquery php ajxa 建站技術
    熱門城市網站建設
    通山網站建設 江漢網站建設 鄖西網站建設 沙市網站建設 石首網站建設 建始網站建設 襄城網站建設 樊城網站建設 曾都網站建設 遠安網站建設 利川網站建設 洪湖網站建設 紅安網站建設 硚口網站建設 隨縣網站建設 黃石港網站建設 丹江口網站建設 團風網站建設 南漳網站建設 長陽網站建設 孝南網站建設 東西湖網站建設 老河口網站建設 棗陽網站建設 谷城網站建設 漢陽網站建設 赤壁網站建設 羅田網站建設 夷陵網站建設 ??稻W站建設 從化網站建設 潮陽網站建設 南澳網站建設 龍湖網站建設 花都網站建設 順德網站建設 荔灣網站建設 蘿崗網站建設 光明新網站建設 新豐網站建設 武江網站建設 番禺網站建設 羅湖網站建設 斗門網站建設 南海網站建設 金平網站建設 樂昌網站建設 越秀網站建設 福田網站建設 白云網站建設 龍華新網站建設 香洲網站建設 翁源網站建設 南沙網站建設 曲江網站建設 天河網站建設 高明網站建設 澄海網站建設 濠江網站建設 禪城網站建設 鶴城網站建設 醴陵網站建設 津市網站建設 攸縣網站建設 湘鄉網站建設 衡山網站建設 江華網站建設 武岡網站建設 安仁網站建設 大祥網站建設 韶山網站建設 赫山網站建設 新化網站建設 炎陵網站建設 衡陽網站建設 岳陽網站建設 藍山網站建設 南縣網站建設 瀘溪網站建設 溆浦網站建設 望城網站建設 永定網站建設 漣源網站建設 城步網站建設 蘇仙網站建設 古丈網站建設 寧鄉網站建設 澧縣網站建設 沅江網站建設 茶陵網站建設
    首頁 | 網站建設 | 微信開發 | H5制作 | 網絡營銷 | 案例展示 | 新聞中心 | 文字版官網| 米拓模版標簽在線手冊
    136-2726-6633 / 027-82756-772

    地址:武漢市解放大道1328號中原大廈1806室

    E-mail:wuhan1806@163.com;QQ:6686935

    本網站所刊載信息,不代表盈科互動觀點,部分信息及數據來源于互聯網,如果侵犯您的權益,請速與我們聯系。
    Copyright ? 2006- 盈科動力(vikasp.net) 版權所有-鄂ICP備13002765號-1技術支持:武漢網站建設

    在線
    客服

    技術在線服務時間:9:00-20:00

    在盈科,您對接的直接是技術員,而非客服傳話!

    電話
    咨詢

    027-8275-6772
    7*24小時客服熱線

    136-2726-6633
    項目經理手機

    微信
    咨詢

    加微信獲取報價
    頂部