Good staff is as follows, when the page finishes loading, masonry failure and I do not know why, but I found a method that is masonry.reload.

This method works sometimes, I wonder why.

var $container = $('.container');
$container.masonry({    
        itemSelector: '.item',
        columnWidth: 25

}).imagesLoaded(function(){
    $container.masonry('reload');   
});

Good staff is as follows, when the page finishes loading, masonry failure and I do not know why, but I found a method that is masonry.reload.

This method works sometimes, I wonder why.

var $container = $('.container');
$container.masonry({    
        itemSelector: '.item',
        columnWidth: 25

}).imagesLoaded(function(){
    $container.masonry('reload');   
});

• javascript
• jquery
• jquery-masonry

3 Answers 3

In the newer versions of masonry you use "reloadItems" instead of "reload". I ran across a tip on this thread that pointed me in the right direction.

.imagesLoaded(function(){
      $container.masonry('reloadItems');   
      $container.masonry('layout');
});

Try the following:

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

var $grids = $('.masonrow').masonry({
    itemSelector : '.masonryme' 
});

$("#Box").append(e).imagesLoaded(function() {
    $grids.masonry('reloadItems');   
    $grids.masonry('layout');
});

i have same problem with you

yesterday i downloaded masonry from it's github repository, and masonry('reload') methods works, but now i change script source to cdn and it's not working anymore, maybe because different versions, after some googling, i got this http://masonry.desandro.com/methods.html#reloaditems, .masonry('reloadItems') to recollect all items element