ajax學習筆記之瀑布流
阿新 • • 發佈:2019-02-09
此為列數固定的瀑布流(就是無論放大縮小瀏覽器百分比 列數不變) 是比較簡單的版本 學習用
這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好
佈局很簡單 就是一個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 滾輪才能觸發請求插資料的操作。