jquery - 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，但 block 仍然“跳跃”。 最后一个col-sm-4不正确。

...................................................... ...................................................... ...................................................... ...................................................... …………………………………… ......

问题:如何将 bootstrap 4 列不同宽度(col-)和不同高度的同位素砌体网格组合起来？

Answer 1

我认为你想使用layoutMode fitRows来代替......

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

https://codeply.com/go/zNeDtV9nLE

<小时/>

另请注意，您必须单独导入其他 layoutMode。看起来您需要使用其他布局模式(“packery”、“masonry”)来看看哪种效果最好。我还会在行上使用 d-block 来禁用 Flexbox。

https://codeply.com/go/BB7IVChoXc