单击 ajax 加载更多按钮时砌体项目不会重新加载

Question

大家好，我有一个关于砌体项目的问题。

我从 codepen.io

创建了这个 DEMO

在这个演示中你可以看到有这个 javascript 代码：

$(window).load(function()
{
$( function() {
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

});
});

我打开一个页面时只显示 10 个帖子。如果用户想要显示其他 10 个帖子，则用户需要单击（显示更多按钮）。我创建了这个 ajax 函数来显示更多帖子。

$('.showmore').live("click",function(event) 
{
event.preventDefault();
var ID = $(this).attr("id");
var P_ID = $(this).attr("rel");
var URL=$.base_url+'diger_fotograflar_ajax.php';
var dataString = "lastid="+ ID+"&profile_id="+P_ID;

if(ID)
{
$.ajax({
type: "POST",
url: URL,
data: dataString, 
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); },
success: function(html){
$("div.posts-holder").append(html).each(function(){
   $('.posts-holder').masonry('reloadItems');
 });
$("#more"+ID).remove();
}
});
}
else
{
$("#more").html('The End');// no results

}

return false;
});

此代码在单击显示更多按钮时有效 $('.posts-holder').masonry('reloadItems'); 但在一个地方收集新帖子。但是当我改变页面的宽度时，一切都在改善。

Answer 1

你必须使用砌体的附加方法......否则它怎么知道你添加了任何新元素。

添加元素不会简单地对齐它们，因为砌体没有任何用于添加新元素的事件监听器。

  var el = $('<div class="kesif-gonderi-alani" style="height:300px;"></div>') 
  $container.masonry().append( el ).masonry( 'appended',el );

她的是 codepen 上的小演示 http://codepen.io/knaman2609/pen/xbJMRY

点击按钮动态追加元素

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

Answer 2

我认为您可以在添加元素后使用 $container.masonry();，如下所示：

$("div.posts-holder").append(html).each(function(){
    $('.posts-holder').masonry('reloadItems');
});

$container.masonry();

您可以看到它正在运行 here。

希望能帮到你。

单击 ajax 加载更多按钮时砌体项目不会重新加载

Masonry items not reloaded when cliking ajax load more button

javascript

css

ajax

jquery

masonry