如何将砌体应用于ajax调用附加的项目

Question

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

<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();
}

使用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);
}