Masonry script event on layout initialization

Question

How to execute my function every time the Masonry script reorganize elements, when a window resized for example? In this example it works only first time.

$(document).ready(function()
{
    $('#container').masonry({
     // layoutComplete: masonry_refreshed(), // <-- doesn't work propriety
        itemSelector: '.item'
    });

    masonry_refreshed();
});

function masonry_refreshed()
{
    alert('Masonry refreshed')
}

DEMO: http://codepen.io/anon/pen/HeuKw

Answer 1

check: http://masonry.desandro.com/events.html you can use following masonry event:

msnry.on( 'layoutComplete', masonry_refreshed );

note that msnry is the name of the variable in which you defined masonry.

---

EDIT: Full demo code:

$(document).ready(function(){
    var container = document.querySelector('#container');
    var msnry = new Masonry(container,{
        itemSelector: '.item',
        columnWidth: 70
    });

    msnry.on( 'layoutComplete', masonry_refresh );

    function masonry_refresh(){
        console.log("Masonry resized!");
    }

});

demo: http://jsfiddle.net/Cd6ce/1/

---

EDIT2: If you really want to use it the jQuery way:

$(document).ready(function(){
    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 70
    });
    var msnry = $('#container').data('masonry');
    msnry.on( 'layoutComplete', masonry_refresh );

    function masonry_refresh(){
        console.log("Masonry resized!");
    }

});

demo: http://jsfiddle.net/Cd6ce/4/

Answer 2

You have to disable 'layout' on initialization. See: http://masonry.desandro.com/options.html

msnry = new Masonry( self.el, {
    isInitLayout: false,
    itemSelector: '.brick'
});

msnry.on( 'layoutComplete', function(){
    console.log('completed');
});

msnry.layout();