在Rails中使用Masonry – 不在窗口上移动的框resize

我已经尝试使用Masonry网站上的文件和masonry-rails gem，但我遇到了同样的问题。

基本上，当我调整浏览器窗口的大小时，框不会移动以适应新的页面大小。 相反，我只是在浏览器中出现滚动条。

我知道文件加载正常，并选择正确的选择器，因为如果我改变了masonry（）参数中的列宽，那么当我加载页面时，这些框会出现在不同的位置。

另外，我使用Bootstrap，如果这是相关的，但我已经命名选择器，因此它们不会与为bootstrap保留的选项冲突 – 例如使用#masonry-container而不是#container。

任何帮助将不胜感激，谢谢!!

application.js中：

//= require masonry/jquery.masonry 

message_board /显示：

 
  "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %> 
  $(function(){ $('#masonry-container').masonry({ // options itemSelector : '.item', columnWidth : 50, isAnimated: true }); });  

_show_message_board.html.erb：

 
  
 
 :
 
 
  

编辑：

我尝试过使用以下其他地方的建议，但仍然无效！：

 $(function(){ var $container = $('#masonry-container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item' }); }); }); 

Answer 1

这就是我为了让Masonry在我的Rails项目中工作所做的一切。 也许这会对你有所帮助……

1. 我从网站下载了“jquery.masonry.min.js”文件并将其放在我的app \ assets \ javascripts目录中。

2. 我补充道

     // =需要jquery.masonry.min 

   到我的application.js文件

3. 我在app \ assets \ stylesheets目录下创建了一个单独的css文件，用于砌筑（只是为了保持整洁），名为“masonry.css.scss”。 这是我的CSS（我使用的是“box”而不是你的“item”）：

    .box {
     保证金：5px;
     填充：5px;
     背景：＃D8D5D2;
      font-size：11px;
      line-height：1.4em;
     向左飘浮;
      -webkit-border-radius：5px;
      -moz-border-radius：5px;
      border-radius：5px;
     显示：内联;
     宽度：260px;
    } 

   .box img {
   宽度：100％;
   }

4. 由于我在“home \ index.html.erb”文件中使用了代码，因此我在app \ assets \ javascripts“目录下创建了一个”home.js“文件。这是我的js代码：

  jQuery（document）.ready（function（）{
         var $ container = $（'＃UserShoppingRequestsContainer'）;
         $ container.imagesLoaded（function（）{
             $ container.masonry（{
                 itemSelector： '盒子'，
                 isAnimated：真实，
                 animationOptions：{
                    持续时间：750，
                    宽松：“线性”，
                    队列：假
                 }
             }）;
         }）;
     }）

1. 最后，在我的“home \ index.html.erb”文件中，我有这样的事情：

     
    <% @shopping_requests.each do |shopping_request| %> 
    <%= link_to image_tag(shopping_request.request_picture.url(:medium)), user_shopping_request_path(shopping_request.user, shopping_request) %> 
   <%= shopping_request.category.name %>
    
    <% end %>  

我想就是这样。