在jQuery Masonry中附加项目的问题 [英] Issue with appending items in jQuery Masonry

问题描述

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

I'm trying to do a masonry layout with a bunch of tiles with some containing images. Here's roughly my code:

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的控制台中出现以下错误:

However, when I run this, I get the following error in Chrome's console:

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

I'm using Masonry v.2.1.05 and jQuery v1.7.2

但是，当我改为使用reload而不是appended时，它的工作方式与演示中的工作相同，但是我希望帖子从底部填充，并且我不希望所有帖子都被填充重新计算.

However, when I instead do reload instead of appended, it works like it does in the demos, but I want the posts to be populated from the bottom, and I don't want all the posts to be recalculated.

您知道发生了什么事吗?

Do you know what's going on?

我也将此问题放在 github 上，但我尚未得到回应

I also put this issue on github but I haven't gotten a response yet.

推荐答案

这正是我需要制作动画并正确渲染各种尺寸的图像所需的内容:

This was exactly what I need to have the animation and have various sized images render correctly:

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

这篇关于在jQuery Masonry中附加项目的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！