div中砌体破坏的Pinterest效应

Question

我试图使用jQuery砌体与启动3在一个Django应用程序，但我没有得到开除的结果。每当一幅图片的高度比列中的其他图片高时，它就会发生在图片中：

​

​

这是我的密码：

  <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。