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

---
title: Infinite Scroll
layout: default
category: demos
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. CSS transitions have been disabled on the container element to avoid triggering AJAX call prematurely.</p>
  </section>

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

  <script src="../{{ site.jquery_js }}"></script>
  <script src="../{{ site.isotope_js }}"></script>
  <script src="../js/jquery.infinitescroll.min.js"></script>
  <script>
    $(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
        donetext  : 'No more pages to load.',
        loadingImg : 'http://i.imgur.com/qkKy8.gif',
        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 ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );
      
    
    });
  </script>