jQuery masonry layout complete event not working

Question

I have followed the documentation exactly and the layout complete event isn't working. Example can be seen here:

<div id="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#items {
    width: 500px;
}
.item { 
    background: #ff0000;
    width: 200px;
    height: 200px;
    margin-bottom:20px;
}

$(document).ready(function() {
    var $container = $('#items');
    $container.masonry({
        itemSelector: '.item',
        columnWidth: 220,
        gutter: 20
    });

    $container.masonry('on', 'layoutComplete', function(msnryInstance, laidOutItems) {
        alert("");
    });
});

Anyone know if this a known bug or have I done something wrong?

score 5 · Answer 1 · answered Sep 01 '15 at 17:21

Here is the code to do this in jQuery:

var $grid = $('.grid').masonry({
    // disable initial layout
    isInitLayout: false,
    //...
});
// bind event
$grid.masonry( 'on', 'layoutComplete', function() {
    console.log('layout is complete');
});
// manually trigger initial layout
$grid.masonry();

This was taken from the bottom of this page: http://masonry.desandro.com/options.html

Mazzu · Answer 2 · 2014-12-10T12:54:20.997

4

You can try for

var msnry = new Masonry( $container, {
     itemSelector: '.item',
        columnWidth: 220,
        gutter: 20
  });

Then use:

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
    //custom code
  });

And trigger layout to call layoutComplete callback

msnry.layout();

Have look at this codepen

edited Dec 10 '14 at 12:54

answered Dec 10 '14 at 12:13

Mazzu

2,676
18
29

Yeah I tried that see this jsfiddle: http://jsfiddle.net/9464buy5/1/ still doesn't work though – geoffs3310 Dec 10 '14 at 12:18
1

@geoffs3310, use msnry.layout(); to trigger layoutComplete – Mazzu Dec 10 '14 at 12:54

score 3 · Accepted Answer · answered Dec 10 '14 at 12:23

Ah I've sorted it using the non jquery method. You have to call the following function after initialisation to trigger the event:

msnry.layout();

e.g

var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
    itemSelector: '.item',
    columnWidth: 220,
    gutter: 20
});

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
    alert("");
});

msnry.layout();

score 3 · Answer 4 · answered Jul 14 '17 at 14:16

You just need to add the event listener before you call masonry()

var $container = $('#items');
$container.on('layoutComplete', function() {
  console.log('complete');
});
$container.masonry({
  itemSelector: '.item',
  columnWidth: 220,
  gutter: 20
});

You can even make a chain:

$('#items').on('layoutComplete', function() {
  console.log('complete');
})
.masonry({
  itemSelector: '.item',
  columnWidth: 220,
  gutter: 20
});

jQuery masonry layout complete event not working

4 Answers4