javascript - 在 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 );
});