1

我正在尝试在我的应用程序中实现 jQuery 砌体，但没有让它工作。

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

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

谢谢，

费萨尔

帖子>索引.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>
4

2 回答 2

3

确保使用脚本的实际路径更新“/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') %>
于 2012-04-25T18:37:04.037 回答
2

如果您的资产文件夹中有 Masonry 文件，它将被编译，因此无需为其添加 javascript_include_tag。同样正如 D3mon-1stVFW 提到的，如果您使用的是 Rails 3.2，则默认包含 jQuery，因此也不需要该脚本标记。

此外，在您的脚本中，您应该将 itemSelector 的类名与 div 元素的名称相匹配。在您的情况下，您的 div 元素属于 class="item"，因此：

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

这应该会让你在你的项目中走得更远。

于 2012-07-02T06:28:49.623 回答