Bootstrap 4 +同位素

Question

我有一个简单的项目。我使用同位素用于砌体网格和Bootstrap 4（flex）：

$(window).on('load', function(){

    function gridMasonry(){
        var grid = $(".grid")
        if( grid.length ){
            
          grid.isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
              //columnWidth: '.grid-sizer'
            }
          });
            
        }
    }
    gridMasonry();
});

.grid-item img {
  height: 192px;
  width: 100%;
  
  object-fit:cover;
}

.y-2.grid-item img {
  height: 400px;
  width: 100%;
}

.grid-item {
  margin-bottom: 16px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  
  
  <div class="container">
    <div class="row grid">
      <div class="col-sm-3 grid-item y-2">
        <img src="https://dummyimage.com/400x900/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 grid-item">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-6 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 grid-item">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fff&text=img" alt="" class="img-fluid">
      </div>

      <!-- <div class="grid-sizer col-4"></div> -->
    </div>
  </div>

尝试和grid-sizer但块仍然“跳”。最后col-sm-4不正确。

.................................................................................................................................................................................................................... ..................... .....................

问题：如何组合不同宽度（col-）和不同高度的bootstrap 4列和Isotope砌体网格？

Answer 1

我想你想用layoutMode fitRows代替......

   grid.isotope({
      itemSelector: '.grid-item',
      percentPosition: true,
      layoutMode: 'fitRows',
   });

https://www.codeply.com/go/zNeDtV9nLE

---

另请注意，您必须单独导入其他layoutModes。看起来您需要使用其他layoutModes（'packery'，'masonry'）来查看最佳效果。我还会在行上使用d-block来禁用flexbox。

https://www.codeply.com/go/BB7IVChoXc