ajax學習筆記之瀑布流

2021-08-06 05:31:21 字數 1275 閱讀 1636

此為列數固定的瀑布流(就是無論放大縮小瀏覽器百分比 列數不變) 是比較簡單的版本 學習用 

這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好

布局很簡單 就是乙個ul下4個li (個數可隨意)

主函式部分:

請求來的資料data格式是乙個陣列中包含了多個物件  乙個物件既包含了src和寬高和介紹等資訊  解析後得到這個陣列

li的寬度固定 所以按比例設定的高

得到的資料不是按順序 從左往右依次插入四個li中  因為寬度雖然固定 但是高度不一定 如果按順序 會出現 四列的高度可能出現很大的差距

所以都是在四個li中長度最短的那列繼續插入。詳見 getshort();

getshort()函式部分;

gettop( obj )函式部分:

這個函式得到的obj距離文件的top值   直接用offsettop得到的是與父級的top值 其實是很簡單就是遞迴的得到offsettop值

這個函式在滾輪事件中用到

onscroll事件函式實現:

瀑布流不是一次性把所有資料都取過來,先取第一頁,往下滑 ,到底沒資料了,在請求第二頁資料,以此類推

怎麼判斷資料到底了,就是判斷用最短那列li 就是圖中兩條藍線的比較 li的高度+距文件頂部的距離 < 可視區的高度+滾輪滾動的距離 就達到條件

注意:這裡有個問題是 插入資料是需要時間的 當你判斷那條li為最短的時候 可能上一次資料已經請求了 但是還沒插入 這樣程式會還以為這列最短 就會再往這列插入資料

所以這裡設定了乙個開關 變數 b  在執行完插資料的操作就將他置為false  插完資料再將它置為true  只有為true 滾輪才能觸發請求插資料的操作。

ajax瀑布流例項

瀑布流 效果分為兩類 接下來我們主要針對第一種固定列數的情況進行詳細的說明 接下來我主要介紹的是第一種方式 原理 通過ajax從後台獲取資料,然後利用dom操作新增到頁面中。並且每次新增的時候將新增到li高度最小的上面,當滾動條滾動的距離與頁面可視區距離之和大於li高度最小的高度與其頂部到body頂...

原生ajax瀑布流demo

最近聽朋友們說起瀑布流挺多的,自己就去研究下了,乙個簡單的原生demo,分享給大家.簡單分為三個文件,有詳細的注釋 img ajax.php demo.php 其中img資料夾中放入 1.jpg 2.jpg 3.jpg.ajax.php頁面 模擬從資料庫讀取資料 arr array op opend...

iOS學習筆記 瀑布流封裝

最近學習了瀑布流布局,是用collectionview實現的。首先說說設計思路,用collectionview做出來的瀑布流是固定行數或者列數的。以現在主流固定列數為例,每個item就是固定寬,不固定高,同時每個item之間的間距是固定的,那麼每行的y值計算就需要通過前一行的最短的item來確定。既...