title: How to correctly use jQuery Isotope + Infinite scroll?
body: <p>I'm trying to implement isotope + infinite scroll.<br>
  The only documentation available at the isotope site is the following code example, and I don't get how does isotope know where to pull data from.<br>
  The infinite scroll plugin page doesn't explain much either.  </p>
  
  <p>Is it querying the <em><strong>nextSelector</strong></em> for its href to know where to pull data from?<br>
  I don't see that the href of <em><strong>#page_nav a</strong></em> changes while doing scrolling, so I'm confused about this.<br>
  And what is <strong><em>navSelector</em></strong> used for?  </p>
  
  <p>Code in <a href="http://isotope.metafizzy.co/v1/demos/infinite-scroll.html" rel="nofollow">http://isotope.metafizzy.co/v1/demos/infinite-scroll.html</a> :</p>
  
  <pre><code>&lt;nav id="page_nav"&gt;
    &lt;a href="../pages/2.html"&gt;&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;script src="../js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="../jquery.isotope.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/jquery.infinitescroll.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(function(){
  
      var $container = $('#container');
  
      $container.isotope({
        itemSelector : '.element'
      });
  
      $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );
  
  
    });
  &lt;/script&gt;
  </code></pre>