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

Answer 2

Infinite Scroll, I've tried once in my project so here are some of the references I had used so far..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.

http://jscroll.com/

Hope it helps.