Bootstrap 4 + Isotope

180

18 декабря 2019, 00:20

Использую isotope для создания masonry сетки + 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=1" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-3 grid-item"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-6 grid-item y-2"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-3 grid-item"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-4 grid-item y-2"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-4 grid-item y-2"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="img-fluid"> 
      </div> 
      <div class="col-sm-4 grid-item y-2"> 
        <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="img-fluid"> 
      </div> 
 
      <!-- <div class="grid-sizer col-4"></div> --> 
    </div> 
  </div>

Пробую и grid-sizer но блоки все равно "соскакивают". Крайние колонки с col-sm-4 идут не по порядку и в одну строку, хотя должны вмещаться.

Вопрос: как совместить bootstrap 4 колонки разной ширины и Isotope masonry сетку?

Answer 1

Когда мы задаём имя класса в параметре columnWidth, блок с этим классом помогает изотопу определить ширину базовой колонки.

Поскольку в вашем примере используются колонки с классами .col-3, .col-4 и .col-6, то за ширину базовой колонки нужно взять .col-1. (Единица — наибольший общий делитель для 3, 4 и 6.)

Поэтому в последнем HTML-блоке в паре с .grid-sizer должен стоять класс .col-1, а не .col-4.

$(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; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<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=1" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-3 grid-item"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-6 grid-item y-2"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-3 grid-item"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-4 grid-item y-2"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-4 grid-item y-2"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="img-fluid"> 
    </div> 
    <div class="col-sm-4 grid-item y-2"> 
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="img-fluid"> 
    </div> 
 
    <div class="grid-sizer col-1"></div> 
  </div> 
</div>