时间戳

首页 > 解决方案 > Bootstrap 4 + 同位素

jquery - Bootstrap 4 + 同位素

问题描述

我有一个简单的项目。我将同位素用于砌体网格和 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 列与同位素砌体网格结合起来？

标签： jquerybootstrap-4jquery-isotope

解决方案

我认为您想改用 layoutMode fitRows...

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

https://codeply.com/go/zNeDtV9nLE

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

https://codeply.com/go/BB7IVChoXc

推荐阅读