砌体水平布局奇怪堆叠

Question

我现在已经花了一个多小时摆弄这个，我也做了一些搜索和评论，但是没有人能够解决我的问题。

我有5个div，第三个和第四个div没有像我期望的那样堆叠，而是第三个div上的最后一个div堆栈。

http://jsbin.com/rajinabu

HTML

  <div class="isotope js-isotope">
      <div class="item width2 height2"></div>
      <div class="item width2 height2"></div>
      <div class="item width2 width2"></div>
      <div class="item width2 width2"></div>
      <div class="item width2 height2"></div>  
  </div>

JS

var $container = $('.isotope').isotope({
layoutMode: "masonryHorizontal", 
itemSelector: ".boxes", 
masonryHorizontal: { rowHeight: 360 } 

});

我期待它表现得像这样，

Answer 1

首先，我没有看到jQuery库被使用。检查你的控制台。我收到错误：＆＃34; $未定义。＆＃34;您还应该在

中包装初始化

 $(document).ready(function(){   YOUR CODE HERE    });

其他一些关闭。