Фильтр Isotope v2 с Infinite Scroll - Фильтр не находит все элементы и Окно не изменяет размер на фильтре

Голова вверх!

В ожидании проблемы с функцией-особенностью в репозитории Isotope GitHub вам следует добавить реакцию "👍", если вы заинтересованы в видя официальные документы и демонстрации для этого (как объединить Изотоп, Бесконечный свиток, фильтрацию и сортировку). Он был открыт творцом Изотопа для оценки интереса. Если вы заинтересованы, пожалуйста, повысьте!

TL; DR: Чтобы получить официальные документы и демонстрации для этого, перейдите сюда и добавьте реакцию "👍" .

Пытаясь собрать вместе фильтруемый макет с помощью Isotope JS plugin и Paul Irish (к сожалению, не поддерживается) Плагин Infinite Scroll.

Фильтрация работает несколько. Сначала он фильтрует содержимое страницы 1. Чтобы он мог фильтровать элементы не на странице 1, мне нужно прокрутить вниз (я полагаю, это приводит элементы в память браузера, что делает его доступным для фильтрации script?)

через набор полей выбора для исходного содержимого страницы (то есть: содержимое на стр. 1).

Вопрос 1: Как заставить фильтр работать для всех элементов страницы? т.е.: Как ссылаться на все элементы в фильтре script, даже те, которые еще не попали на страницу через бесконечный свиток?

Вопрос 2: Как только я прокручиваю вниз, и все элементы фильтруются, окно не изменяется при фильтрации. поэтому, когда через фильтр отображается только один или два элемента, по-прежнему можно прокручивать страницу вниз (хотя элементы не показаны). После проверки этих элементов я вижу, что они все еще находятся в DOM.

Фильтрация Script

function filterTags(){
  isotopeInit();

  var $checkboxes = $('#tag-wrap input')

  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      var $dataToFilter = $(this).attr('data-filter');
      arr.push( $dataToFilter );
    });
    arr = arr.join(', ');
    $container.isotope({ filter: arr });
  });
};

Isotope Init

function isotopeInit(){
  var $container = $('.post-excerpts').imagesLoaded( function() {
    $container.isotope({
      itemSelector: '.post-excerpt-block-wrap',
      layoutMode: 'masonry',
      animationEngine: "best-available",
      masonry: {
        columnWidth: '.post-excerpt-block-wrap' 
      },
      transitionDuration: '2.0',
       hiddenStyle: {
        opacity: 0
      },
      visibleStyle: {
        opacity: 1,
        transform: 'scale(1)'
      }
    });
  });
};

Бесконечный инициал прокрутки

$container.infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>No more posts to load.</em>",
    img: "http://www.infinite-scroll.com/loading.gif",
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: '.infinite-loader',
    speed: 'fast',
    start: undefined
  },
  binder: $(window),
  //pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  //bufferPx: Math.round($(window).height() * 0.9),
  nextSelector: "a.older-posts",
  navSelector: "nav.pagination",
  contentSelector: ".content",
  itemSelector: ".post-excerpt-block-wrap",
  maxPage: {{pagination.pages}},
  appendCallback: true
},
  // Callback for initializing scripts to added post excerpts
  function(newElements) {
    var $newElems = $( newElements );
    loadImages();
    checkForFeatured();
    makeFontResponsive();
    addReadMoreLinks();
    fitVidInit();
    $newElems.imagesLoaded(function(){
      $container.isotope( 'appended', $newElems );
    });
  }
);

Любые идеи, предложения или другое понимание невероятно приветствуются. Большое спасибо заранее.

Обновление:

Относительно Вопросов 2: Похоже, проблема связана с тем, как Isotope предлагается фильтровать элементы. В частности, этот код из функции инициализации изотопа:

transitionDuration: '2.0',
hiddenStyle: {
  opacity: 0
},
visibleStyle: {
  opacity: 1,
  transform: 'scale(1)'
}

Я попытался изменить его на следующее, хотя это полностью удаляет из DOM (исправление проблемы с интервалом), и они не возвращаются в DOM при их "нефильтровке". Так что это не решение:

hiddenStyle: {
  display: 'none'
},
visibleStyle: {
  display: 'visible',
  transform: 'scale(1)'
}

Я также попробовал просто удалить эти строки конфигурации вместе, что кажется очевидным "чистым" решением, но при фильтрации все равно остается много свободного места на странице. Не уверен, что проблема здесь связана с моей реализацией Isotope или Infinite Scroll.

Обновление:

Ответ 1