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?
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();