div 中 Masonry 的 Pinterest 效果被破坏

Question

我正在尝试在 Django 应用程序中将 jQuery Masonry 与 Bootstrap 3 一起使用，但我没有得到加速的结果。每次图片的高度大于列中其他图片的高度时，就像图片中一样：

这是我的代码：

  <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" 在您的情况下，即包含类 span3 的 div。