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

【问题标题】：How to apply masonry to items appended by ajax call如何将砌体应用于 ajax 调用附加的项目
【发布时间】：2017-07-19 08:09:33
【问题描述】：

我有一个图片网格，在移动视图 (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();
}

使用砌体 v4.1.1

【问题讨论】：

标签： jquery-masonry masonry

【解决方案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);
}

【讨论】：