mury jQuery z Wordpress i imagesLoaded - jquery, wordpress, jquery-masonry

Używam murów jquery na temat wordpress, nad którym pracuję. Po tym, jak zmagałem się z uruchomieniem go przez jakiś czas, odkryłem, że:

        <script type="text/javascript">
jQuery(function () {
jQuery("#masonry-wrap").masonry({
itemSelector: ".masonry-box",
columnWidth: 283
});
})
</script>

Wydaje się działać dobrze dla mnie ... Jednak sprawdzenie strony w przeglądarce Chrome i Safari powoduje przesunięcie dolnej części elementów zawierających do następujących elementów ...

Teraz gdzieś czytam, że można to rozwiązać, używając wtyczki imagesLoaded i kodu, który znalazłem tutaj: http://masonry.desandro.com/demos/images.html - jednak ponieważ jestem absolutnie okropny z jQuery, mam małe trudności z uruchomieniem go.

Czy ktokolwiek mógłby mi pomóc włączyć go do kodu, którego już używam i który działa (ten powyżej)?

Każda pomoc będzie bardzo ceniona! juliański

Odpowiedzi:

Myślę, że to powinno działać dla ciebie;

// Masonry Trigger
var $container = jQuery("#masonry-wrap");

$container.imagesLoaded( function(){
$container.masonry({
itemSelector: ".masonry-box",
columnWidth: 283
});
})

Pamiętaj, aby użyć najnowszej wersji obrazówLoaded, miałem problem przez jakiś czas i powodem było to, że moja wersja była nieco nieaktualna.

EDYTOWAĆ

Powiedziałem, że używam imageLoaded tylko wtedy, gdy załadowałem nową zawartość za pośrednictwem AJAX i używam metody reLayout.Jeśli uruchomisz murarstwo na $ window.load () po załadowaniu obrazów, powinno również działać dobrze.

(function($){

$(window).load(function() {

// Masonry Trigger
var $container = $("#masonry-wrap");

$container.masonry({
// options
itemSelector: ".masonry-box",
columnWidth: 283
});

});

})(jQuery);