Как соместить Masonry + ajax + infinitescroll?

Question

[zggb]

Я использую Masonry для отображений карточек пользователей. Проблема в том, что когда я использую фильтр пользователей с помощью AJAX, js masonry не срабатывает, карточки выводятся в 1 столбец. Как я понимаю происходит конфликт с escape_javascript render. Пробовал отключать turbolinks, не помогло.

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

Вот код для рендеринга в 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

$(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

[zggb]

Да, нужно было повторно вызывать Masonry.

Вот, что добавил и сработало.

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

Answer 2

[Viktor Vsk]

Где какой конфликт?
Может, нужно вызывать функцию после того, как элементы добавлены снова?
Например, в js.erb, вроде:

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

Или триггер какой-то вешать. Что такое imagesLoaded() ?
https://github.com/kristianmandrup/masonry-rails
stackoverflow.com/questions/24940041/infinite-scro...
railscasts.com/episodes/114-endless-page-revised?v...
Эти ссылки ничем не помогают?