Question

我正在尝试显示按创建日期组织的帖子。 Jquery Masonry适用于第一个容器，但是对于第二个容器，它无法正确加载。当我在Web浏览器中查看代码时，它会显示第二个容器：

<div id="pins" class="transitions-enabled">
      <div class="box panel panel-default">

      </div>
  </div>

何时显示此内容（第一个容器的内容显示）：

<div id="pins" class="transitions-enabled masonry" style="position: relative; height: 247px; width: 448px;">
      <div class="box panel panel-default masonry-brick" style="position: absolute; top: 0px; left: 0px;">

      </div>

  </div>

应用程序/资产/ Javascript角/ pin.js.coffee：

$ -> 
$('#pins').imagesLoaded ->
$('#pins').masonry
  itemSelector: '.box'
  isFitWidth: true

视图/针/ index.html.erb：

<%= render 'pages/home' %>

<div id="pins-container" class="container">
 <% @pins_by_day.each do |day, pins| %>
   <h5 align="center"> <%= day.strftime('%B %d, %Y') %> </h5>
    <div class="well well-sm">
     <div id="pins" class="transitions-enabled">
      <% for pin in pins %>
        <div class="box panel panel-default">
         <%= link_to pin %>

          <div class="panel-body">
            <p>
              <%= pin.description %>
            </p>
          </div>

      </div>
    <% end %>
  </div>
 </div>
<% end %>
</div>

如果有人能解释如何在我的页面上正确加载多个容器的jquery砌体，我将不胜感激。第一部分正确加载，但第二部分只是一列。

Answer 1

当你每页有多个ID时，HTML并不喜欢它。而jQuery只会找到第一个。因此，如果您在部分或模板上进行迭代，请确保您不使用ID，或者使ID成为动态。

而不是id="pins"尝试：

<div class="masonry-pins transitions-enabled">

并且

$ -> 
  $('.masonry-pins').imagesLoaded ->
    $('.masonry-pins').masonry
      itemSelector: '.box'
      isFitWidth: true

另外，我想在imagesLoaded回调中，您可以访问this处的元素吗？您可能只想致电$('.masonry-pins').masonry

，而不是致电$(this).masonry

第二个容器不会在我的rails应用程序中加载jquery砌体

1 个答案: