Question

我正在尝试在我的应用中实现jQuery砌体，但不能让它工作。

我认为问题在于我正在尝试将其应用于表格，而不是div。有人可以看看并确认一下吗？我该如何解决？

我想要应用jquery砌体的页面只是一个简单的index.html.erb页面，它显示了所有用户的帖子。我希望这些出现在3列中，在不同高度的框中。

谢谢，

费萨尔

帖子＆GT; 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而不是表格单元格。

如果您仍需要帮助，请与我联系。

修改

根据您的评论如下：

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

如果使用3.2，那么jquery默认只使用rails jquery：install命令

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

Answer 2

如果您的资产文件夹中有Masonry文件，则会对其进行编译，因此无需为其添加javascript_include_tag。另外，正如D3mon-1stVFW所提到的，如果您使用的是Rails 3.2，默认情况下会包含jQuery，因此也不需要该脚本标记。

此外，在脚本中，您应该将itemSelector的类名与div元素的名称相匹配。在您的情况下，您的div元素是class =“item”，所以：

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

这样可以让你在项目中更进一步。

无法在我的Rails 3应用程序中实现jQuery Masonry

2 个答案: