One controller of the Products application that displays a grid of products, updates those products via Ajax on a form submission, then attempts to lay out the refilled container of products using Masonry. The Masonry is working fine, but fires too soon on the Ajax calls.

_products_grid.html.erb

<%= products.each do |p| %>
  <div class="product">
    <%= image_tag p.picture.url %>
    <div>
      <h3><%= p.title %></h3>
    </div>
  </div>
<% end %>

products.html.erb

<!-- Div to hold grid of products fitted together with Masonry -->
<div id="products-grid">
  <%= render partial: 'products_grid', locals: { products: @products } %> # @products is the list of products to render
</div>

<!-- Form to update products via Ajax -->
<%= form_tag products_path, remote: true do %>
  <%= submit_tag %>
<% end %>

<!-- Script to call Masonry on initial product load -->
<script>
  $container = $("#products-grid");
  
  $container.imagesLoaded( function() {
    $container.masonry();
  });
</script>

products.js.erb

$container = $("#products-grid");

/* Fill container div with products */
$container.html('<%= escape_javascript(render(partial: "products_grid", locals: {products: @products})) %>');

/* When images are loaded, layout with Masonry */
setTimeout( function () {
  $container.imagesLoaded( function() {
    $container.masonry();
  });
}, 1); /* I forget where I saw this, but somewhere this said this setTimeout will make JS wait until UI renders on Ajax call */

products_controller.rb

class ProductsController < ApplicationController
  
  def products
    @products = Product.all
    
    # Respond to html and js formats
    respond_to do |format|
      format.html
      format.js   # render products.js.erb when action called via ajax
    end
  end
    
end