当克服ajax加载更多按钮时，没有重新加载砌体物品

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

我从codepen.io创建了这个DEMO

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

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

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

 $('.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(''); }, 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; }); 

单击showmore按钮$('.posts-holder').masonry('reloadItems');时，此代码正常工作.masonry $('.posts-holder').masonry('reloadItems'); 但是在一个地方收集新post。 但是当我改变页面的宽度时，一切都在改善。

Answer 1

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

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

你可以看到它在这里工作。

希望能有所帮助。

Answer 2

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

添加元素根本不会将它们对齐，因为砌体没有添加新元素的任何事件列表器。

  var el = $('
') $container.masonry().append( el ).masonry( 'appended',el ); 

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

单击按钮可动态追加元素

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