在jQuery砌體中追加項目的問題

我正在嘗試使用一些包含圖像的瓷磚進行砌體佈局。這裏的大致我的代碼：在jQuery砌體中追加項目的問題

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上，但是我還沒有得到答覆。

來源

2012-06-23 Jonathan Ong

我不知道這是一個解決問題的辦法，但...忍耐一下，我想大聲這裏...

鑑於.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-24 01:07:28

以及它的工作原理，如果我簡單地改變'磚石（「附加」，$的數據，真）''來砌築（「刷新」）'像我在質詢時說，所以我應該'imagesLoaded'被解僱正確。另外，根據文檔，'appendTo'應該在'masonry'方法之前。 –

如果您嘗試運行我的版本，會發生什麼情況？不要擔心明顯的訂單 - 它應該按照文檔執行。 –

這正是我需要的動畫，並有各種大小的圖像渲染正確：

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

來源

2012-11-26 20:39:59 user1854591

即時獲取此錯誤'不能在初始化之前調用砌體方法;試圖稱呼'附加' –

嘗試這種解決方案，這將肯定工作。

//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-23 11:18:32

在jQuery砌體中追加項目的問題

回答

相關問題