瀑布流 -- jQuery技術實現 延遲AJAX加載圖片
瀏覽量:5716
實現方法:
給window的scroll事件l綁定一個處理函數:做如下工作:
1.如何判斷最后一行的圖片,是否進入了可視區域?
如果:最后一行的某個圖片距離瀏覽器可視區域頂部的距離值 小于 (可視區域的高度+滾動條滑動的距離值);
那么:就可以判定這個圖片進入了瀏覽器的可視區域;
2.如何用AJAX請求服務器數據;
$.getJSON()方法,直接請求JSON格式的數據;
3.將數據播入到相應的列隊;
使用$.each循環,將對應的JSON數據入到對應的列當中.
注意事項
當在執行AJAX請求的時候,是有數據在傳輸,所以需要一定的時間,才能獲得返回的jSON數據。(有了數據,才能向UL中插入LI)而這個時候,如果用戶又一次拖動滾動條,那么上面代碼的isSee 還是返回true;所以又會執行AJAX請求。這里我們就需要手動設置一個“開關”,來控制。
只有當數據加載完成后,并且都添加進了對應的UL之后,再次拖動時,打開這個“開關”,即onOff設為true;,
因為數據加載完成后,意味著每列的UL里面,在最后面又多出了剛通過AJAX添加進來的LI數據,所以可以有再次的AJAX請求。
查看效果:http://www.bigbenlau.com/skin/myWaterFallFloat/index.html
下載地址:myWaterFallFloat.rar
上一篇:as 3的基本語法
下一篇:簡單的json串生成