---

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

        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 ) ); 

        }

      );

    });

  </script>