如何将砌体应用到由ajax附加的项目
问题描述:
我有一个图片网格,在移动视图(320 X 480)中,有一个“加载更多”按钮。容器格如下:如何将砌体应用到由ajax附加的项目
<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
答
重新申请砌筑后的延迟为我工作。
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);
}