如何将砌体应用到由ajax附加的项目

Question

我有一个图片网格，在移动视图（320 X 480）中，有一个“加载更多”按钮。容器格如下：

<div id="divMoments" class="grid" data-masonry='{ "itemSelector": ".grid-item"}'> 
    <div class="grid-item"> 
    <div class="gridContainer"> 
     <img src="ImageURL" /> 
     <p>OwnerName</p> 
    </div>    
    </div> 
</div> 

点击按钮，它会触发ajax调用。接收到的结果是许多这样的网格项目的HTML字符串：

"<div class=\"grid-item\">imagex<div> 
<div class=\"grid-item\">imagey<div> 
..." 

字符串附加到容器后，我有jQuery代码重新加载砖石，但所有的图像重叠。当我检查html时，砌体css应用于所有项目。

function GetNextSet() { 
      jQuery.ajax({ 
       url: "/api/sitecore/Moment/GetNextSet", 
       type: "POST", 
       context: this, 
       success: function (data) { 
        ShowNextResultSet(data); 
       } 
      }); 
     } 

function ShowNextResultSet(data) { 
    var $content = jQuery(data.ResultSet); 
    jQuery("#divMoments").append($content).masonry('appended', $content); 
    jQuery("#divMoments").masonry('reloadItems'); 
    jQuery("#divMoments").masonry(); 
} 

使用砖石V4.1.1

Answer 1

重新申请砌筑后的延迟为我工作。

function ShowNextResultSet(data) { 
    var $content = jQuery(data.ResultSet); 
    jQuery("#divMoments").append($content).masonry('appended', $content); 

    setTimeout(function() { 
    jQuery("#divMoments").masonry('reloadItems'); 
    jQuery("#divMoments").masonry(); 
    }, 100); 
}