出現的bug:
1、clos=Math.floor($(window).width()/pins.first().outerWidth());
由於前面的CSS樣式中將float:left註釋掉了，並且最開始沒有把初始化位置那一部分代碼放到最前面，也就是圖片沒有用absolute定位。img外面用盒子包圍，是塊級元素，自動占據一行，與窗口寬度相等，自然會導致下面的cols一直彈出是1，以後遇到這種情況，一定要結合HTML和CSS樣式綜合考慮！！

2、還是absolute的問題：
waterfall中clos>index的條件下給圖片添加樣式，沒有加上position:absolute 導致圖片加載的時候重疊在一起。
第一次調用waterfall之後，後來每次在加載數據之後又都會重新調用waterfall函數，所以必須每次在樣式中都加上absolute定位，而不能只指定top和left

最後總結一下瀑布流的思路：

特點：所有圖片列等寬

一進來時獲取屏幕寬度和圖片寬度，相除取整便是列數。獲取所有圖片盒子，index小於列數的將其排列到最上面一行，有兩種情況：一是如果直接排列，由於float:left;的存在，圖片會直接排列開，不用設置。如果是具有分散效果的那種，圖片一開始時是混在一起放在瀏覽器中間的，所以設置圖片排列時要指定第一列top:0;left等於圖片寬度*索引。將第一排的圖片高度放在一個數組中，後面索引大於列數的，就把每個圖片的高度加在這個數組中最小的那個值上面，圖片也加在對應列上面。然後是滾動時檢測是否達到加載圖片的條件，這裏條件定義為：滾上去的高度+瀏覽器窗口的高度大於從瀏覽器頂部到最後一張圖片的高度+最後一張圖片高度的一半時就加載圖片。當然，圖片加載進去之後要重新對這些圖片進行排列

不足之處：每次都重新排列，占用的資源也太大了吧。。。。
簡單思路：
1、原先的HTML中的圖片長度用一個全局索引保存，dataInt中每次只加載一定數量的圖片，再調用waterfall時只對這張新加載的圖片重新排列
2、flex布局

先這麽多，剩下的過段時間在寫吧

具有分散效果的瀑布流