在 jQuery Masonry 中附加项目的问题

Issue with appending items in jQuery Masonry

本文关键字：项目 问题 jQuery Masonry      更新时间：2023-09-26

我正在尝试用一堆瓷砖进行砖石布局，其中一些包含图像。大致是我的代码：

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

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

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

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

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

无论如何，试试我的版本。我想它要么有效，要么给出与以前相同的错误。

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

//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 );
});
相关文章：