無法在我的Rails 3應用中實現jQuery Masonry

Question

我正在嘗試在我的應用程序中實現jQuery砌體，但沒有使其正常工作。

我認為問題在於我正在嘗試將其應用於表格，而不是div。 有人可以看看並確認嗎？ 我如何解決它？

我要在其上應用jQuery砌體的頁面只是一個簡單的index.html.erb頁面，其中顯示了所有用戶的帖子。 我想讓這些顯示在3列的高度不同的框中。

謝謝，

費薩爾

帖子> INDEX.HTML.ERB

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/app/assets/javascripts/jquery.masonry.min.js"></script>

<table class="table table-striped">
<script type="text/javascript"> 
$('#container').masonry({
    itemSelector: '.box',
    columnWidth : 100 
});
</script>
<tbody>
<% @posts.each do |post| %>
<tr>
<td>I am a <%= post.title %> getting married in <%= post.job %> in <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.</td>
<td><%= time_ago_in_words(post.created_at) %> ago.</td>
</tr>
<% end %>
</tbody>
</table>

Answer 1

確保使用腳本的實際路徑更新“ /path/to/jquery.masonry.min.js”

這是我即時進行的工作示例http://jsfiddle.net/D7QQU/1/ ：

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="/path/to/jquery.masonry.min.js"></script>
  <style>
    .item {
      width: 220px;
      margin: 10px;
      float: left;
    }
  </style>
  <script> 
    $('#container').masonry({
       itemSelector: '.box',
        columnWidth : 100 
    });
  </script>

  <div id="container">
    <% @posts.each do |post| %>
      <div class="item"> I am a <%= post.title %> getting married in <%= post.job %> in    <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.
      <%= time_ago_in_words(post.created_at) %> ago.</div>
    <% end %>
  </div>

從我所見，它使用div而不是表格單元格。

讓我知道您是否仍然需要幫助。

編輯：

根據您的評論如下：

您需要使用它將此添加到頁面頂部。 它將在資產中找到js。

如果使用3.2，則默認情況下使用jquery，只需使用rails jquery：install命令

<%= javascript_include_tag('jquery.masonry.min') %>

Answer 2

如果您的Assets文件夾中有Masonry文件，則會對其進行編譯，因此無需為其添加javascript_include_tag。 同樣如D3mon-1stVFW所述，如果您使用的是Rails 3.2，則默認情況下包括jQuery，因此也不需要該腳本標簽。

另外，在腳本中，應將itemSelector的類名稱與div元素的名稱匹配。 就您而言，您的div元素屬於class =“ item”，因此：

<script> 
    $('#container').masonry({
       itemSelector: '.item',
       columnWidth : 100 
    });
</script>

這將使您的項目更進一步。