Question

我在投资组合页面中使用了两个插件的组合。

一切正常，我称之为：

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();

        }

      );

现在，问题是：我试图使用无限滚动+同位素和过滤器/排序。它适用于第一页（当然），如果它给我排序/过滤元素。剩余的元素（已排序/过滤）将被＆＃34;附加＆＃34;当我向下滚动一个巨大的＆＃34;，可怕的效果。

问题：可以从＆＃34;无限滚动＆＃34;中检索所有页面。在点击过滤器/排序时调用$container.isotope( 'appended', $( newElements ) );之前？

请注意，网页来自动态内容（例如：mypage.html？page = 1，mypage.html？page = 2，mypage.html？page = 3 ...），哪些是最好的如果可能的话，解决这个问题吗？

感谢所有人！

Jquery无限滚动检索所有页面（与jquery同位素组合）

0 个答案: