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

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事件必须触发，否则您为什么会收到错误？也许图像做加载到未悬浮的片段中！

无论如何，试试我的版本。我想它会起作用或给出与以前相同的错误。

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

在jQuery Masonry中追加项目的问题

3 个答案: