title: Implementing Infinite Scrolling with jquery
body: <p>I am working on a project that uses the <a href="http://masonry.desandro.com/index.html">jQuery Masonry</a> and <a href="http://masonry.desandro.com/demos/infinite-scroll.html">Infinite Scroll</a> plugins to load "n" amount of pictures from instagram using their API. Looking at this short <a href="http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/">example</a> my understanding is that I need to have before hand the html pages to be rendered:</p>
  
  <pre><code>&lt;nav id="page-nav"&gt;
    &lt;a href="pages/2.html"&gt;&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time.</p>
  
  <pre><code>    $(document).ready(function(){       
          var access_token = location.hash.split('=')[1];
  
          if (location.hash) {
  
                $.ajax({
              type: "GET",
              dataType: "jsonp",
              cache: false,
              url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
              success: function(data) {
  
                  for (var i = 0; i &lt; 20; i++) {
              $("#instafeed").append("&lt;div class='instaframe'&gt;&lt;a target='_blank' href='" + data.data[i].link +"'&gt;&lt;img src='" + data.data[i].images.standard_resolution.url +"' /&gt;&lt;/a&gt;&lt;/div&gt;");   
                  }     
  
              }
          });
  
  
          } else {
          location.href="https://instagram.com/oauth/authorize/?display=touch&amp;client_id=MY_CLIENT_ID&amp;redirect_uri=MY_URI"; 
  
          }
  
      });
  </code></pre>
  
  <p>I guess I will need a pagination mechanism but based on the tutorial mentioned above I believe I will first need to pre-define the html pages to be loaded. So now here my questions</p>
  
  <ol>
  <li>Does that mean this plugin (<a href="http://masonry.desandro.com/demos/infinite-scroll.html">Infinite Scroll</a>) requires to have "n" amount of html files in a directory to achieve infinite scrolling?</li>
  <li>Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files? </li>
  <li>How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?</li>
  </ol>
  
  <p>With kind regards</p>