javascript - 如何捕捉 Masonry 结束？

Question

在我的项目中，我使用 Masonry 插件来组织我的 block 。所以我想知道在 Masonry 完成其任务后是否会触发任何事件？我已经尝试过这段代码，除了按应有的方式重新排序我的 block 之外，它没有执行任何操作...

jQuery(document).ready(function () {
    // also tried in jQuery style
    var msnry = new Masonry(document.getElementById('timeline'), {itemSelector : 'article'});
    // doesn't fire
    msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ){
        console.log('layout done, just this one time');
        return true;
    });
})

Answer 1

layout 事件在您将事件绑定(bind)到完成处理程序之前就已完成。您可以再次调用 .layout() 方法，这将触发该方法。

jQuery(document).ready(function () {
    // also tried in jQuery style
    var msnry = new Masonry(document.getElementById('timeline'), {itemSelector : 'article'});
    // doesn't fire
    msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ){
        console.log('layout done, just this one time');
        return true;
    });

    // Triggers the onLayoutComplete.
    msnry.layout();
})