问题在jQuery的砌体追加项目(Issue with appending items in jQu

我试图做一个砖石布局与一些含图片一堆砖。 这里的大致我的代码：

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

我使用的砌体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 );
});

Answer 2:

我不知道这是一个解决问题的办法，但...忍耐一下，我想大声这里...

鉴于.append($data) 内出现$data.imagesLoaded处理程序，目前还不清楚如何该事件将永远火。 我说，根据我的理解是，浏览器不会直到基于片段尝试加载图像data （大概是一个HTML字符串）已经被加载到DOM（与.append()

下面会更有意义：

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

这就是说，在你的代码的imagesLoaded事件必须不然为什么你会得到错误火？ 也许你的图像加载到unappended片段！

无论如何，尝试我的版本。 我想这会工作或给予相同的错误了。

Answer 3:

尝试这种解决方案，这将肯定工作。

//Initiate your maosnry
$container = $('#container');
$container.imagesLoaded(function(){ 
    $container.masonry({
        itemSelector: '.item'
    }); 
});

//and on ajax call use this to append or prepend
$container.append($data).imagesLoaded(function(){
    $container.masonry( 'appended', $data, true );
}); 

文章来源: Issue with appending items in jQuery Masonry