How do I add infinite scroll with jQuery Masonry?

Question

I am trying to incorporate infinite scroll with my current web site that is using a type of jQuery Masonry. I am trying to understand the language and the basic function of javascript (and html in general), but it can be quite overwhelming. I am also seeing different methods to add infinite scroll to a web page, including the use of php. Basically, I have no sense of direction as to which is the best method for my web site. Any tips or help is greatly appreciated. And I apologize for my lack of knowledge regarding this topic, but I just feel this is quite over my head... @_@

Here is my web site. It is my personal artwork collections: http://themptyrm.com

Answer 1

add this in your html file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script src="../js/jquery.infinitescroll.min.js"></script>

and add this, here you can specify infinite scroll options

<script type="text/javascript">
var $container = $('#container');
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements );
    $container.masonry( 'appended', $newElems );
  }
);
</script>

by the way your page looks great

if you have more doubts go here Masonry with Infinite scroll