masonry.js not working with modal partial

问题:

Basically i have something like this, just a partial to render posts and position them with Masonry.js. It worked great, but when I added the "show" partial shown below (a hidden bootstrap modal to "show" the post when clicked) the posts are loaded in a single column. Then when more posts are appended via pagination and window scroll event they are positioned just fine across the screen.

Has anyone done anything similar or knows what could be happening?

<% @posts.each do |post| %>  
  <%= render :partial => "show", :locals => { :post => post } %>
  <div class="grid-item">
    <div class="panel panel-default">
      <div class = "container" data-toggle="modal" data-target="#myModal<%=post.id%>">
      </div>      

      <div class= "panel-body">
      </div>   

      <div class ="panel-footer">
      </div>    
    </div>
  </div>  
<% end %>