Masonry：一款很好用的jquery網頁瀑布流布局插件
類似的布局，似乎一夜之間出現在國內外大大小小的網站上，比如 Pinterest (貌似是最早使用這種布局的網站了)，Mark之，蘑菇街，點點網，以及淘寶最新上線的“哇哦” 等等。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。所以，我們給這樣的布局起了一個形象的名字 — 瀑布流式布局。
Masonry是一款很好用的jquery網頁布局插件，它可以去掉不同高度div之間的空白，讓你的網頁看上去更加的整齊、漂亮！
官網插件下載地址以及詳解地址：示例demo及文檔說明：http://masonry.desandro.com/
圖片高度BUG修正：由于網絡傳輸的速度問題，當瀏覽器加載了dom，但是img圖片還沒有加載完畢，這個插件在計算圖片高度和定位的時候，就會出錯，在firefox和chrome中最為明顯，尤其是google chrome。
原因：在chrome瀏覽器下測試，在圖片加載過程中，img的寬度和高度均為0，而在IE下，則瀏覽器先給img設定了寬度和高度，所以這個插件 在IE下使用正常，但在chrome會出錯。而這個插件看了官方的image demo也是如此，box層并沒有動態生成一個高度值把布局撐開。
解決辦法就是先讓所有的圖片加載完畢，才執行一次masonry()方法。
本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！