因為 pinterest 的緣故，有不少網站喜歡使用瀑布流排版，其中最簡單好用的套件莫過於 masonry 了。
然而在網頁載入時，圖片下載比較慢，若在整個網頁載入完成之前圖片還沒好，就會造成重疊。
這種奇怪效果顯然不是我們想要的！
解決方法有好幾種，最簡單的一種就是不要用瀑布流，或者參考以下替代作法：
把 jQuery 的 ready 改成 load
我們一般使用$(document).ready(fn)，會在網頁 DOM 載入完畢後就觸發，一般使用這種觸發方式不會有問題，但是遇到瀑布流排版可就沒辦法了。此時可以改成$(window).load(fn)，待網頁內引用的資源都載入完畢再觸發，就不會有圖片重疊的問題。
jQuery(window).on('load', function(){
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 10,
});
});
使用 imagesLoaded 插件
其實和第一種方法大同小異，它會等到圖片載入完畢之後再來處理排版。
先下手為強，指定圖片高度
適用少量圖片，或是圖片高度固定的情況。因為 masonry 這個套件必須先指定每個 grid item 的寬度，因此圖片高度的不確定，正是造成重疊的元兇，我們可以預先利用 CSS 或是 html 指定圖片的高度，讓瀏覽器先把區塊空出來，就不會重疊了。
##參考資料