jQuery masonry is not working with rails

I am trying to have a transition effect with jQuery masonry in a rails app, for that am using the masonry-rails gem i thing everything has gone well but the masonry effect is not working. My index file

<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/lposts.js.coffee" rel="javascript">
<div class="transitions-enabled" id="lposts">
  <% @lposts.each do |lpost| %>
    <div class="box panel panel-default">
      <%= link_to (image_tag lpost.picture.url), lpost %>
      <h2>
        <%= link_to lpost.tittle, lpost %>
      </h2>
      <p class="user">
        Submitted by
        <%= link_to lpost.location, lpost %>
        <center><%= link_to lpost.Contact, lpost %></center>
      </p>
    </div>
  <% end %>
</div>

In my gemfile, i have added the masonry-rails gem

gem 'masonry-rails', '~> 0.2.4'

In my application.js file

// This is a manifest file that'll be compiled into application.js
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// Put JS file that applies to all pages under initializations directory, which
// will get required in init.js.
//
// Put JS file that only applies to a specific page under pages directory, which
// will get required in page_specific.js.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (http://ift.tt/1Hr2XzQ) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require medium-editor
//= require handlebars
//= require jquery-sortable
//= require jquery.ui.widget
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require medium-editor-insert-plugin
//= require index.min
//= require taggle
//= require jquery.autoSave
//= require pubsub
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require init
//= require page_specific

In my application.scss file

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *= require 'masonry/transitions'
 */




// Use @import to import all Sass files, instead of using sprocket require.
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

In my lpost.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://ift.tt/jEIcxH

 $ ->
   $('#pins').imagesLoaded ->
     $('#pins').masonry
       itemSelector: '.box'
       isFitWidth: true