Bind Infinite Scroll + Masonry plugins

Question

I would like to use infinite scroll and Masonry plugins to display my pictures. However I'm completely stuck with the HTML part.

I use the code below to bind the two plugins but I don't know how to display my html class .navigation and .nav-previous a in the dom to make it work.

$(window).load(function(){

// Main content container
var $container = $('.grid');

// Masonry + ImagesLoaded
 $container.imagesLoaded(function(){
 $container.masonry({
  // selector for entry content
  itemSelector: '.grid-item',
  columnWidth: 300,
  "gutter": 10
 });
});

// Infinite Scroll
$container.infinitescroll({

// selector for the paged navigation (it will be hidden)
navSelector  : ".navigation",
// selector for the NEXT link (to page 2)
nextSelector : ".nav-previous a",
// selector for all items you'll retrieve
itemSelector : ".grid-item",

// finished message
loading: {
  finishedMsg: 'No more pages to load.'
  }
},

// Trigger Masonry as a callback
function( newElements ) {
  // hide new items while they are loading
  var $newElems = $( newElements ).css({ opacity: 0 });
  // ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    // show elems now they're ready
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
  });

 });

And here is my html :

<div class="grid">

  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>

</div>

Answer 1

Your link can be like this:

<a id="next" href="index2.html">next page?</a>

And infinite-scroll js like this:

 $container.infinitescroll({
    navSelector     : "#next",
    nextSelector    : "a#next",
  // selector for all items you'll retrieve

 itemSelector : ".grid-item",

 // finished message
 loading: {
 finishedMsg: 'No more pages to load.'
 }
 },

 // Trigger Masonry as a callback
 function( newElements ) {
 // hide new items while they are loading
 var $newElems = $( newElements ).css({ opacity: 0 });
 // ensure that images load before adding to masonry layout
 $newElems.imagesLoaded(function(){
 // show elems now they're ready
 $newElems.animate({ opacity: 1 });
 $container.masonry( 'appended', $newElems, true );
  });

  });