Как обнаружить layoutComplete, когда jQuery Masonry позиционирует только один элемент?

Question

Я использую масонство для компоновки ряда статей, сначала спрятав все и обнаружив предметы, когда макет завершает огонь. Это работает так, как планировалось, когда размещено более одной статьи, но когда один из них присутствует, макет остается скрытым. Я тоже использую Modernizr (см. Ниже).

Вот мой код:

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'); 
});