jQuery Masonry + Bootstrap，Grid的行为与预期不同

Question

我已经解决了这个问题好几个小时了，我似乎无法按照我的预期工作。

我希望我的盒子使用bootstrap网格进行设置：

现在出于某种原因，在我使用插件jQuery Masonry（我用它来处理各种div高度）后，它只变成了两列。

HTML

  <div class="container" >
    <div id="grid" class="row">

      <div class="span5 box box1">1</div>
      <div class="span4 box box2">2</div>
      <div class="span3 box box3">3</div>

      <div class="span5 box box4">4</div>
      <div class="span4 box box5">5</div>
      <div class="span3 box box6">6</div>      

    </div>
  </div>

CSS

.box { background: #ccc; margin-bottom: 20px; } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }

.box4 { height: 250px; }
.box5 { height: 340px }
.box6 { height: 240px }

JS

jQuery(function(){
    jQuery('#grid').masonry({
      itemSelector: '.box',
    });         

});

演示： http://jsbin.com/afihux/3/

我希望它尽可能地响应，这就是我使用Twitter Bootstrap的一个原因。

Answer 1

目前，我采用了这种方法：

.box { background: #ccc; position: relative } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }
.box4 { height: 250px; top: 10px; }
.box5 { height: 340px; top: -80px; }
.box6 { height: 240px; top: 20px; }


@media (min-width: 1200px) {

.box4 { top: 20px; }
.box5 { top: -70px }
.box6 { top: 30px }

}

@media (max-width: 767px) {
.box { margin-bottom: 20px; top: 0; }
}

演示： http://jsbin.com/avupok/1

我使用css top 属性来重新调整总布局。

我认为没有必要使用第三方jQuery插件，因为网格仍然可以管理（只有6个盒子）。

如果顶级属性相对属性与其他浏览器配合良好，我还没有测试过。我只是在Google Chrome和Safari上测试过它。我觉得它会在某些浏览器中崩溃。

这是有待改进的。