ruby-on-rails - 在 Rails 中使用 Masonry - 框在窗口调整大小时不移动

Question

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

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

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

另外，如果相关的话，我正在使用 Bootstrap，但我已经命名了选择器，因此它们不会与为引导程序保留的选择器发生冲突 - 例如使用#masonry-container 而不是#container。

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

应用程序.js：

//= require masonry/jquery.masonry

留言板/显示：

<div id="show-message-board">
    <%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>  
</div>


<script>
$(function(){
  $('#masonry-container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 50,
    isAnimated: true
  });
});


</script>

_show_message_board.html.erb：

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
  <div class="item">
    <p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
    <p class="message_content"><%= message.content %></p>
  </div>
<% end %>

编辑：

我已经尝试按照其他地方的建议使用以下内容，但这仍然不起作用！：

$(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. 我添加了

   //= require jquery.masonry.min

   到我的 application.js 文件

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

   .box {
     margin: 5px;
     padding: 5px;
     background: #D8D5D2;
     font-size: 11px;
     line-height: 1.4em;
     float: left;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     display: inline;
     width: 260px;
   }
   
   
   .box img {
     width: 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:'.box',
                isAnimated:true,
                animationOptions:{
                    duration:750,
                    easing:'linear',
                    queue:false
                }
            });
        });
    })

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

    <div id="UserShoppingRequestsContainer">
       <% @shopping_requests.each do |shopping_request| %>
          <div class="box col3" id="<%= shopping_request.id.to_s %>">
             <%= link_to image_tag(shopping_request.request_picture.url(:medium)),                    user_shopping_request_path(shopping_request.user, shopping_request) %>
             <p class="serif1_no_padding"><%= shopping_request.category.name %></p>
          </div>
       <% end %>
    </div>
   

我想就是这样。