官網(wǎng)：http://masonry.desandro.com/
問題：每個item里面包含圖片叙量，由于加載延遲，導(dǎo)致渲染重疊九串。
解決方法：等待圖片加載完畢再次渲染绞佩。
初始化：
var $grid = $('.grid');
$grid.masonry({
// fitWidth: true,
// initLayout: false,
itemSelector: '.grid-item',
columnWidth: '.grid-item'
// percentPosition: true
});
判斷圖片加載完畢方法：
//判斷圖片加載完成后
var t_img; // 定時器
var isLoad = true; // 控制變量
// 判斷圖片加載狀況，加載完成后回調(diào)
isImgLoad(function () {
// 加載完成
$grid.masonry('layout');
});
// 判斷圖片加載的函數(shù)
function isImgLoad(callback) {
// 注意我的圖片類名都是cover猪钮，因為我只需要處理cover品山。其它圖片可以不管。
// 查找所有封面圖烤低，迭代處理
$('.img').each(function () {
// 找到為0就將isLoad設(shè)為false谆奥，并退出each
if (this.height === 0) {
isLoad = false;
return false;
}
});
// 為true，沒有發(fā)現(xiàn)為0的拂玻。加載完畢
if (isLoad) {
clearTimeout(t_img); // 清除定時器
// 回調(diào)函數(shù)
callback();
// 為false酸些，因為找到了沒有加載完成的圖，將調(diào)用定時器遞歸
} else {
isLoad = true;
t_img = setTimeout(function () {
isImgLoad(callback); // 遞歸掃描
}, 500); // 我這里設(shè)置的是500毫秒就掃描一次檐蚜，可以自己調(diào)整
}
}
