isotope/_posts/demos/2011-01-02-infinite-scroll.html

---
title: Infinite Scroll
layout: demo
category: demos
related: layout
infinite_scroll: true
---

  <section id="copy">
    <p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout.</p>
  </section>

  <div id="demo" class="iso-container variable-sizes">
    {% for element in site.elements_ordered limit:20 %}
      {% include element-partial.html %}
    {% endfor %}
  </div> <!-- #demo -->
  
  <nav id="page_nav">
    <a href="../pages/2.html"></a>
  </nav>

  <script src="../js/jquery-1.4.4.min.js"></script>
  <script src="../src/mini-modernizr.js"></script>
  <script src="../src/jquery.opto-transform.js"></script>
  <script src="../src/jquery.smartresize.js"></script>
  <script src="../src/jquery.isotope.js"></script>
  <script src="../src/jquery.ui.widget.js"></script>
  <script src="../js/jquery.infinitescroll.min.js"></script>
  <script>
    $(function(){

      var $demo = $('#demo');
    
      $demo.isotope({
        itemSelector : '.element',
      });
      
      $demo.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
        donetext  : 'No more pages to load.',
        debug: false,
        errorCallback: function() { 
          // fade out the error message after 2 seconds
          $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
        }
        },
        // call Isotope as a callback
        function( newElements ) {
          $demo.isotope( 'appended', $( newElements ) ); 
        }
      );
      
    
    });
  </script>