Rails 4 will_paginate砌体

Question

I'm trying to get infinite scroll working with masonry but when I load more content, the boxes are appended to beginning of grid and overlap others. I have images in some of the boxes.

show.js.erb

var boxes = $('<%= j render(:partial => "mypost", :locals => {mypost: mypost}, :collection => mypost) %>')
var $container = $('#containermason');

$container.append($boxes).imagesLoaded(
    function(){
        $container.masonry('appended', $boxes);

    }
);

<% if mypost.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate mypost %>');
<% else %>
  $('.pagination').remove();
<% end %>

Answer 1

 Used the jquery.infinitescroll plugin instead, much simpler

 $(function(){

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

  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.item',
      columnWidth: '265px',
      "gutter": 10
    });
  });

  $container.infinitescroll({
    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a',  // selector for the NEXT link (to page 2)
    itemSelector : '.item',     // selector for all items you'll retrieve
    loading: {
      finishedMsg: '<p style="background: #82d63e; margin-bottom: 20px; padding: 5px; border-radius: 10px; color: #fff; font-weight: bold;">that\'s all the content</p>',
          img: 'http://i.imgur.com/C1U8WRZ.gif'
      }
    },
    // 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 ); 

      });
 $("abbr.timeago").timeago();
    });

});