jquery-masonry - 布局初始化时的砌体脚本事件

Question

如何每次执行我的函数 Masonry脚本重新组织元素，例如当窗口调整大小时？
在这个例子中，它只在第一次工作。

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

    masonry_refreshed();
});

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

演示: http://codepen.io/anon/pen/HeuKw

Answer 1

检查:http://masonry.desandro.com/events.html
您可以使用以下砌体事件:

msnry.on( 'layoutComplete', masonry_refreshed );

请注意， msnry 是您定义砌体的变量的名称。

编辑:
完整的演示代码:

$(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!");
    }

});

演示: http://jsfiddle.net/Cd6ce/1/

编辑2:如果您真的想以 jQuery 方式使用它:

$(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!");
    }

});

演示: http://jsfiddle.net/Cd6ce/4/