gpt4 book ai didi

jquery-isotope - 同位素和无限滚动手动触发

转载 作者:行者123 更新时间:2023-12-04 04:31:11 24 4
gpt4 key购买 nike

我正在使用 Isotope 插件和 Infinite Scroll 插件。使用默认设置无限滚动会自动触发加载新元素,这很好,但是,我宁愿有一个按钮“加载更多图像”。

我只缺少一小段代码,可以从无限滚动中获取新元素,我可以将其传递给同位素插入函数。请在下面的代码中查看我的评论:

// initialize infinite scroll
$container.infinitescroll({
navSelector : '#paging', // selector for the paged navigation
nextSelector : '#paging a', // selector for the NEXT link (to page 2)
itemSelector : '.col', // selector for all items you'll retrieve
loading: {
msgText: 'Loading...',
finishedMsg: Loaded all!',
}
} // <-- NOTE that we do not use callback function here!
);


$(window).unbind('.infscr');

$('#paging a').click(function(){

// NEED CODE HERE TO GET NEW ELEMENTS FROM INFINITE SCROLL AND PASS THOSE ELEMENTS TO $container.isotope('insert', $(newElements));

});

最佳答案

无限滚动插件实际上提供了一个 "manual-trigger"-behavior做你想做的事。

包含 manual-trigger.js之后 jquery.infinitescroll.js , 通过传递 behavior: 'twitter' 告诉无限滚动使用该行为调用插件时,只需调用 Isotope 作为回调,如 Isotope's demo for Infinite Scroll 中所示:

$container.infinitescroll({
navSelector : '#paging',
nextSelector : '#paging a',
itemSelector : '.col',
behavior: 'twitter',
loading: {
msgText: 'Loading...',
finishedMsg: 'Loaded all!'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);

关于jquery-isotope - 同位素和无限滚动手动触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12409116/

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