jQuery Masonry只定位一個項目時如何檢測layoutComplete？

Question

我正在使用砌體佈局一些文章，首先隱藏所有內容並在layoutComplete觸發時顯示項目。當有多個文章被定位時，這可以按計劃運行，但是當存在一個文章時，佈局仍然隱藏。我也使用Modernizr（見下面的sass）。

這裏是我的代碼：

CSS（SASS）：

.js-masonry, [data-masonry-options] { 

    @include media-query(lap-and-up) { 

     html.js & { 
      visibility: hidden; 
     } 

     html.js &.masonry-loaded { 
      visibility: visible; 
     } 
    } 
} 

的Javascript：

var $container = $('.js-masonry').masonry(); 

$container.imagesLoaded(function() { 

    $container.masonry({ 
     "columnWidth": ".grid-sizer", 
     "gutter": ".gutter-sizer", 
     "itemSelector": ".item", 
     "percentPosition": true 
    }); 

    $container.masonry('on', 'layoutComplete', function() { 
     $container.addClass('masonry-loaded'); 
    }); 
}); 

砌體如果確實添加內嵌樣式到單個項目，但layoutComplete不是射擊。有沒有一個技巧，或者我發現了一個錯誤？

Answer 1

我不明白爲什麼我的代碼不工作，但我懷疑初始化磚石和附加的onLayoutComplete事件之間，就已經被解僱了。在調用佈局方法之前，回到香草JS方法並附加layoutComplete爲我解決了這個問題。

var container = document.querySelector('.js-masonry'); 

var msnry = new Masonry(container, { 
    "columnWidth": ".grid-sizer", 
    "gutter": ".gutter-sizer", 
    "itemSelector": ".item", 
    "percentPosition": true 
}); 

msnry.on('layoutComplete', function(laidOutItems) { 
    container.className = 'masonry-loaded'; 
}); 

imagesLoaded(container, function() { 
    msnry.layout(); 
}); 

Answer 2

無法測試這個，但嘗試在圖片加載之外調用layoutcomplete。

var $container = $('.js-masonry').masonry(); 

$container.imagesLoaded(function() { 

$container.masonry({ 
    "columnWidth": ".grid-sizer", 
    "gutter": ".gutter-sizer", 
    "itemSelector": ".item", 
    "percentPosition": true 
}); 


}); 
$container.masonry('on', 'layoutComplete', function() { 
    $container.addClass('masonry-loaded'); 
});