瀑布流 搜集

參考網站：

注：jquery.masonry.js 和 <code>masonry官網的</code> <code>masonry.pkgd.min.js  有差別,參數寫法不同。  經測試masonry.pkgd.min.js貌似不支援ie6，jquery.masonry.js支援ie6.</code>

<a target="_blank"></a>

      由于網絡傳輸的速度問題，當浏覽器加載了dom，但是img圖檔還沒有加載完畢，這個插件在計算圖檔高度和定位的時候，就會出錯，在firefox和chrome中最為明顯，尤其是google chrome.

原因：

在chrome浏覽器下測試，在圖檔加載過程中，img的寬度和高度均為0，而在IE下，則浏覽器先給img設定了寬度和高度，是以這個插件在IE下使用正常，但在chrome會出錯。而這個插件看了官方的image demo也是如此，box層并沒有動态生成一個高度值把布局撐開。

解決辦法就是先讓所有的圖檔加載完畢，才執行一次masonry()方法。

代碼如下：

當然了，這樣子的話，在加載圖檔的時候，你會先看到圖檔簡單的排列而已，沒有磚塊瀑布流的效果，隻有當所有圖檔加載完成後才會出現磚塊效果。是以，至于以上代碼加不加，就要考慮你的網站的通路速度了！

結合jquery.infinitescroll.js使用   jquery.infinitescroll.js原理大概就是通過ajax不斷請求後面的資料，然後填充到後面

本文轉自挨踢前端部落格園部落格，原文連結http://www.cnblogs.com/duanhuajian/p/3465826.html如需轉載請自行聯系原作者

@挨踢前端