jquery - 在我的 Rails 3 应用程序中实现 jQuery Masonry 时遇到问题

Question

我正在尝试在我的应用程序中实现 jQuery masonry，但无法使其正常工作。

我认为问题是我试图将它应用于表，而不是 div。有人可以看一下并确认这一点吗？我该如何修复它？

我想要应用jquery masonry的页面只是一个简单的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 而不是表格单元格。

如果您仍然需要帮助，请告诉我。

编辑:

根据您在下面的评论:

您需要使用它将其添加到页面顶部。它会在assets中找到js。

如果使用 3.2，则默认情况下 jquery 就在其中，只需使用rails jquery:install 命令

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