How to combine Masonry + ajax + infinitescroll?

Question

JavaScript

I am using Masonry to display user cards. The problem is that when I use user filter with AJAX, js masonry doesn't fire, cards are output in 1 column. As I understand it, there is a conflict with the escape_javascript render. Tried disabling turbolinks, didn't help.

var $container = $('#masonry-container');
$container.empty();
$container.append("<%= escape_javascript render @users %>");

Here is the code to render in index.html.erb

<div class="col-md-9">
  <div id="masonry-container" class="transitions-enabled infinite-scroll clearfix centered content">
    <div id="filter">
      <%= render @users %>
    </div>
  </div>
  <div class="span7 text-center"><%= will_paginate %></div>
</div>

Masonry users.js code

$(document).ready(function(){
          var $container = $('#masonry-container');
      $container.imagesLoaded(function(){
          $container.masonry({
          itemSelector: '.box',
          columnWidth: function( containerWidth ) {
              return containerWidth / 20;
          },
          gutterWidth: 5,
          isAnimated: !Modernizr.csstransitions
          });
      });

Answer 1

Yes, Masonry had to be called again.
Here's what I added and it worked.

$( document ).ajaxComplete(function() {
    $container.masonry('reloadItems').masonry();
});

Answer 2

Where is the conflict?
Maybe you need to call the function after the elements are added again?
For example, in js.erb, like:

$container.masonry({
          itemSelector: '.box',
          columnWidth: function( containerWidth ) {
              return containerWidth / 20;
          },
          gutterWidth: 5,
          isAnimated: !Modernizr.csstransitions
          });

Or hang some kind of trigger. What is imagesLoaded()?
https://github.com/kristianmandrup/masonry-rails
stackoverflow.com/questions/24940041/infinite-scro...
railscasts.com/episodes/114-endless-page-revised?v...
These links are of no help ?