用jQuery製作瀑布流網頁

因為Pintrest紅的關係,所以像這樣的網站便開始流行,瀏覽起來真的很方便,最近因為一個專案的需求,所以用自己的想法搞了一個出來,照著自己的理論是完成了,不過應該還可以在程式上更加優化,這邊提一下簡單的概念。

我想可以直接理解的就是他是卷軸拉到最下面會讀取剩下的內容,所以關鍵就在於是否可以知道捲軸到底部,然後偵測捲到底部後再使用AJAX去將資料append到DOM裡。
  1. $(window).bind("scroll",function() {   
  2.     //偵測網頁目前卷軸位置   
  3.     var topHeight=$(document).scrollTop();   
  4.     //偵測視窗高度   
  5.     var winHeight = $(window).height();   
  6.     //偵測網頁高度   
  7.     var docHeight = $(document).height();   
  8.     //如果捲軸位置加視窗高度比網頁總高等於網頁總高度, 代表到最下面了, 稍微-10是讓使用者不用捲到最底   
  9.     if (topHeight+winHeight > docHeight-10){   
  10.                 //這邊執行ajax   
  11.     }   
  12.  });  

jquery的ajax方法,我這次是把從php讀取的資料轉成json格式,再由jquery append到DOM內,然後可以用迴圈去限制每次讀取的筆數,這樣就可以完成了。

最近的專案上線就可以看到成果了。

留言

熱門文章