1. 程式人生 > >ajax學習筆記之瀑布流

ajax學習筆記之瀑布流

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

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

佈局很簡單 就是一個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 滾輪才能觸發請求插資料的操作。