Javascript Jquery无限滚动检索所有页面(与Jquery结合使用)
我在一个公文包页面上使用两个插件的组合 及 所有这些都很好,我称它们为:Javascript Jquery无限滚动检索所有页面(与Jquery结合使用),javascript,jquery,jquery-isotope,infinite-scroll,Javascript,Jquery,Jquery Isotope,Infinite Scroll,我在一个公文包页面上使用两个插件的组合 及 所有这些都很好,我称它们为: var $container = $('.mydiv'), colWidth = function () { var w = $container.width(), columnNum = 1, columnWidth = 0; if (w > 800) {
var $container = $('.mydiv'),
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 800) {
columnNum = 3;
} else if (w > 600) {
columnNum = 2;
} else if (w > 350) {
columnNum = 2;
} else if (w > 250) {
columnNum = 1;
}
columnWidth = Math.floor(w/columnNum);
$container.find('.element-item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/)
//width= 230
//width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4
//height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
//width: width,
//height: height,
'margin-bottom': '30px'
});
});
return columnWidth;
},
isotope = function () {
$container.isotope({
animationEngine : 'jquery',
resizable: false,
transitionDuration: animationspeed,
itemSelector: '.element-item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 5
},
getSortData: {
name: '.name',
cashable: '.cash',
number: '.number parseFloat',
wr: '.wr parseFloat',
bonus: '.bonus parseFloat',
category: '[data-category]',
country: '[data-country]',
filter: '[data-filter]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
}).css({'text-align':'center'});
};
isotope();
$(window).resize(isotope);
$container.infinitescroll({
loading: {
selector: '.infy-loader',
finishedMsg: '<span class="alert alert-warning" role="alert">No more casinos to load</span>',
msgText: '<span class="alert alert-info" role="alert"><i class="fa fa-fw fa-spinner fa-spin"></i> Please be patient, Loading...</span>',
img: 'data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw=='
},
debug : false,
animate : false,
navSelector : '.jr_pagenav_pages', // selector for the paged navigation
nextSelector : '.jr_pagenav_pages a', // selector for the NEXT link (to page 2)
itemSelector : '.element-item', // selector for all items you'll retrieve
bufferPx : 250,
dataType: 'html'
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
isotope();
$("[data-toggle='tooltip']").tooltip();
}
);
现在,问题是:我正在尝试使用带有过滤器/排序的无限滚动+同位素。
当然,它适用于第一页,如果它给我排序/过滤的元素。当我向下滚动时,剩下的排序/过滤的元素将被追加,产生巨大而可怕的效果
问题:在调用$container.com'added'、$newElements之前,可以从无限卷轴检索所有页面;当我点击过滤器/排序时
请记住,页面来自动态内容,例如:mypage.html?page=1、mypage.html?page=2、mypage.html?page=3,如果可能的话,实现这一目标的最佳解决方案是什么
谢谢大家 如果您希望检索前面的所有页面,则不再使用无限滚动。您也可以通过Ajax调用而不是无限滚动条返回它们,或者将它们组合到一个页面中,然后通过一个Ajax调用返回。谢谢您的评论。基本上,我需要销毁无限滚动,然后通过Ajax调用所有页面。这是我的想法。对吧?对。你想要的行为不再是无限滚动,所以从卸载插件开始吧。