title: Isotope v2 filtering with Infinite Scroll - Filter not finding all items and Window not resizing on filter
body: <p><strong>Head's up!</strong></p>
  <p>There's a pending <a href="https://github.com/metafizzy/isotope/issues/1358" rel="noreferrer">feature-request issue</a> on Isotope's GitHub repo that you should add a &quot;&quot; reaction to if you're interested in seeing official docs and demos for this (how to combine Isotope, Infinite Scroll, filtering, and sorting). It was opened by Isotope's creator to gauge interest. If interested, please upvote!</p>
  <p>**TL;DR: To help get official docs and demos for this, <a href="https://github.com/metafizzy/isotope/issues/1358" rel="noreferrer">go here and add a &quot;&quot; reaction.**</a></p>
  <hr />
  <p>Trying to piece together a filterable layout using the <a href="http://isotope.metafizzy.co/" rel="noreferrer">Isotope JS plugin</a> and Paul Irish's (sadly unmaintained) <a href="https://github.com/paulirish/infinite-scroll" rel="noreferrer">Infinite Scroll plugin</a>.</p>
  <p>Filtering is somewhat working. Initially it filters the page 1 content. For it to filter items not on page 1 I need to scroll down (I suppose this is bringing the elements in the browser's memory, thus making it available to the filtering script?)</p>
  <p>via a set of select boxes for the initial page content (ie: the content on page 1).</p>
  <p><strong>Question 1:</strong>
  How to get the filter to work for all page items? ie: How to reference <em>all</em> elements in the filter script, even those not yet brought onto the page via infinite scroll?</p>
  <p><strong>Question 2:</strong>
  Once I have scrolled down and all the elements are filterable, the window does not resize on filtering. so when there are only one or two elements shown via the filter, it's still possible to scroll way down the page (even though no elements are shown). Upon inspection of these elements, I see that they're still in the DOM.</p>
  <p><strong>Filtering Script</strong></p>
  <pre><code>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 });
    });
  };
  </code></pre>
  <p><strong>Isotope Init</strong></p>
  <pre><code>function isotopeInit(){
    var $container = $('.post-excerpts').imagesLoaded( function() {
      $container.isotope({
        itemSelector: '.post-excerpt-block-wrap',
        layoutMode: 'masonry',
        animationEngine: &quot;best-available&quot;,
        masonry: {
          columnWidth: '.post-excerpt-block-wrap' 
        },
        transitionDuration: '2.0',
         hiddenStyle: {
          opacity: 0
        },
        visibleStyle: {
          opacity: 1,
          transform: 'scale(1)'
        }
      });
    });
  };
  </code></pre>
  <p><strong>Infinite Scroll Init</strong></p>
  <pre><code>$container.infinitescroll({
    loading: {
      finished: undefined,
      finishedMsg: &quot;&lt;em&gt;No more posts to load.&lt;/em&gt;&quot;,
      img: &quot;http://www.infinite-scroll.com/loading.gif&quot;,
      msg: null,
      msgText: &quot;&lt;em&gt;Loading the next set of posts...&lt;/em&gt;&quot;,
      selector: '.infinite-loader',
      speed: 'fast',
      start: undefined
    },
    binder: $(window),
    //pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
    //bufferPx: Math.round($(window).height() * 0.9),
    nextSelector: &quot;a.older-posts&quot;,
    navSelector: &quot;nav.pagination&quot;,
    contentSelector: &quot;.content&quot;,
    itemSelector: &quot;.post-excerpt-block-wrap&quot;,
    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 );
      });
    }
  );
  </code></pre>
  <p>Any ideas, suggestions, or other insights are incredibly welcomed. Many thanks in advance.</p>
  <p>##Update:
  Regarding Questions 2: Seems the problem is related to how Isotope is being told to filter the items. Specifically, this code from the isotope init function:</p>
  <pre><code>transitionDuration: '2.0',
  hiddenStyle: {
    opacity: 0
  },
  visibleStyle: {
    opacity: 1,
    transform: 'scale(1)'
  }
  </code></pre>
  <p>I've tried changing it to the following, though this removes the completely from the DOM (fixing the spacing issue) and they're not returned into the DOM upon &quot;unfiltering&quot; them. So it's not a solution:</p>
  <pre><code>hiddenStyle: {
    display: 'none'
  },
  visibleStyle: {
    display: 'visible',
    transform: 'scale(1)'
  }
  </code></pre>
  <p>I've also tried simply removing these config lines altogether, which seems like the obvious &quot;clean&quot; solution, but this too still leaves lots of white space on the page upon filtering. Not sure whether the problem here is with my Isotope or Infinite Scroll implementation.</p>