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调用所有页面。这是我的想法。对吧?对。你想要的行为不再是无限滚动,所以从卸载插件开始吧。