gpt4 book ai didi

javascript - 单击 ajax 加载更多按钮时 masonry 元素不会重新加载

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:14:27 26 4
gpt4 key购买 nike

大家好,我有一个关于 masonry 元素的问题。

我创建了这个 DEMO 来自 codepen.io

在这个演示中你可以看到有这个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;
});

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

enter image description here

最佳答案

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

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

$container.masonry();

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

希望对您有所帮助。

关于javascript - 单击 ajax 加载更多按钮时 masonry 元素不会重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28874932/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com