jquery - Masonry horizontal layout stacking oddly

Question

I've been fiddling with this for more than an hour now, I've also did some search and review some that was posted here but non of them was able to resolve my issue.

I have 5 divs and the third and forth div doesn't stack up as I was expecting, instead the last div stack on the third 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 } 

});

I was expecting it to behave something like this,

Answer 1

首先，我没有看到 jQuery 库被使用。检查您的控制台。我收到错误消息：“$ 未定义。” 您还应该将初始化包装在

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

其他一些关闭。