在jQuery Masonry中追加项目的问题

Question

我正在尝试使用一些包含图像的瓷砖进行砌体布局.这是我的代码:

var $mainContent = $('#main-content');

$mainContent.imagesLoaded(function() {
  $mainContent.masonry()
});

loadMore = function() {
  $.ajax({
    url: '/things',
    success: function (data) {
      var $data = $(data);
      $data.imagesLoaded(function() {
        $mainContent.append($data).masonry('appended', $data, true)
      })
    }
  })
}

$('#load-more').on('click', loadMore)

但是,当我运行此操作时,我在Chrome的控制台中收到以下错误:

Uncaught TypeError: Cannot read property 'width' of undefined

跟踪:

bB jquery.min.js:2
f.each.f.cssHooks.(anonymous function).get jquery.min.js:4
f.extend.css jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
e.extend.access jquery.min.js:2
f.each.f.fn.(anonymous function) jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
$.Mason._placeBrick jquery.masonry.js:246
$.Mason.layout jquery.masonry.js:172
$.Mason._appended jquery.masonry.js:352
$.Mason.appended jquery.masonry.js:341

我正在使用Masonry v.2.1.05和jQuery v1.7.2

但是,当我改为reload代替时appended,它就像在演示中一样,但我希望从底部填充帖子,我不希望重新计算所有帖子.

你知道发生了什么吗？

我也把这个问题放在github上,但我还没有得到回复.

Answer 1

这正是我需要动画并正确渲染各种大小的图像:

var el = jQuery(html);
el.imagesLoaded(function() {
    $('#container').append(el).masonry( 'appended', el );
});