与div中的砌体的Pinterest效果被打破

Question

我试图在Django应用程序中使用带有Bootstrap 3的jQuery Masonry，但我没有得到结果。每当图片的高度大于列中的其他图片时，它就会像图片中那样高兴：

这是我的代码：

  <script src={% static "js/jquery.masonry.min.js" %}></script>


    <script>
  $(function(){

  var $container = $('#container');

  $container.imagesLoaded( function(){
    $container.masonry({
      itemSelector : '.item'
    });
  });

  });
</script>

和HTML

<div class="container">


 {% for key, values in prodmatrix %}
 <div class = "span3 item"> 

 <div class="product-box feed masonryImage">
 <img src="{{ STATIC_URL }}{{values.1.0}}" />
 <a href="{% url 'product_detail' slug=values.3.0 %}" class="title">{{ values.0.0 }}</a><br/>
 <p>
 {{ values.0.0 }}
 </p>
 </div>

 </div> 
 {% endfor %}

 </div>

Answer 1

我认为最外层的div应该包含class = "item masonryImage" 在你的情况下，即div包含类span3。