用jQuery製作瀑布流網頁

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

我想可以直接理解的就是他是卷軸拉到最下面會讀取剩下的內容，所以關鍵就在於是否可以知道捲軸到底部，然後偵測捲到底部後再使用AJAX去將資料append到DOM裡。

view plaincopy to clipboardprint?

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內，然後可以用迴圈去限制每次讀取的筆數，這樣就可以完成了。

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