javascript - jQuery masonry 布局完成事件不起作用

Question

我完全按照文档进行操作，但布局完成事件不起作用。例子可以在这里看到:

http://jsfiddle.net/9464buy5/

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

有人知道这是已知错误还是我做错了什么？

Answer 1

这是在 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();

这是从本页底部截取的:http://masonry.desandro.com/options.html