jQuery Masonry和Ajax附加项目？

Question

我试图使用一些ajax和jQuery Masonry插件来添加一些项目 - 但由于某种原因,新项目没有得到砌体应用？

我正在使用

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

然而,随后附加的项目没有class="masonry-brick"应用,这意味着它们完全填满了定位？

Answer 1

看来该masonry函数需要一个jQuery对象作为其第二个参数而不是原始HTML字符串.你应该能够通过包装成功回调参数来解决这个问题:

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var el = jQuery(html);
            jQuery("#content").append(el).masonry( 'appended', el, true );
        }
    });
});

Answer 2

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

解

Answer 3

有类似的问题,而是使用以下行(转换为您的代码).对不起,我不记得我发现它的位置.

在您的代码中替换为:

jQuery("#content").append(el).masonry( 'appended', el, true );

有了这个:

jQuery("#content").append(el).masonry( 'reload' );

http://masonry.desandro.com/methods.html

Answer 4

success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}   

对我来说很好。