1 ---

     2 title: Infinite Scroll

     3 layout: default

     4 category: demos

     5 infinite_scroll: true

     6 ---

     7 

     8   <section id="copy">

     9     <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>

    10   </section>

    11 

    12   <div id="container" class="variable-sizes clearfix infinite-scrolling">

    13     {% for element in site.elements limit:20 %}

    14       {% include element-partial.html %}

    15     {% endfor %}

    16   </div> <!-- #container -->

    17   

    18   <nav id="page_nav">

    19     <a href="../pages/2.html"></a>

    20   </nav>

    21 

    22   <script src="../{{ site.jquery_js }}"></script>

    23   <script src="../{{ site.isotope_js }}"></script>

    24   <script src="../js/jquery.infinitescroll.min.js"></script>

    25   <script>

    26     $(function(){

    27 

    28       var $container = $('#container');

    29     

    30       $container.isotope({

    31         itemSelector : '.element'

    32       });

    33       

    34       $container.infinitescroll({

    35         navSelector  : '#page_nav',    // selector for the paged navigation 

    36         nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)

    37         itemSelector : '.element',     // selector for all items you'll retrieve

    38         loading: {

    39             finishedMsg: 'No more pages to load.',

    40             img: 'http://i.imgur.com/qkKy8.gif'

    41           }

    42         },

    43         // call Isotope as a callback

    44         function( newElements ) {

    45           $container.isotope( 'appended', $( newElements ) ); 

    46         }

    47       );

    48       

    49     

    50     });

    51   </script>