砌体横向布局堆叠奇特

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 库被使用。检查您的控制台。我收到错误消息：“$ 未定义。”您还应该将初始化包装在

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

其他一些闭包。