1

我正在尝试使用一堆带有一些包含图像的瓷砖进行砌体布局。这里大致是我的代码：

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上，但我还没有得到回复。

4

3 回答 3

7

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

var el = jQuery(html);
el.imagesLoaded(function() {
    $('#container').append(el).masonry( 'appended', el );
});
于 2012-11-26T20:39:59.407 回答
1

试试这个解决方案......这肯定会奏效。

//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 );
});
于 2014-04-23T11:18:32.533 回答
1

我不确定这是否是问题的答案，但是......请耐心等待我在这里大声思考......

鉴于它.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事件必须触发，否则为什么会出现错误？也许图像确实会加载到未附加的片段中！

不管怎样，试试我的版本。我想它会起作用或给出与以前相同的错误。

于 2012-06-24T01:07:28.330 回答