Блог

Главная - Вопросы по программированию - Bootstrap 4 Isotope

Bootstrap 4 Isotope

#jquery #bootstrap-4 #jquery-isotope

#jquery #bootstrap-4 #jquery-изотоп

Вопрос:

У меня простой проект. Я использую isotope для masonry grid и 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/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 grid-item">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-6 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 grid-item">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-4 grid-item y-2">
        <img src="https://dummyimage.com/400x400/000/fffamp;text=img" alt="" class="img-fluid">
      </div>

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

Попробуйте grid-sizer , но блоки все еще «прыгают». Последнее col-sm-4 неверно.

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

Вопрос: Как объединить в bootstrap 4 столбца разной ширины (col-) и разной высоты и изотопную сетку кладки?

Ответ №1:

Я думаю, вы хотите использовать layoutMode fitRows вместо этого…

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

https://codeply.com/go/zNeDtV9nLE

Также обратите внимание, что вы должны импортировать другой layoutModes отдельно. Похоже, вам нужно будет поиграть с другими режимами компоновки (‘packery’, ‘masonry’), чтобы увидеть, какой работает лучше всего. Я бы также использовал d-block в строке, чтобы отключить flexbox.

https://codeply.com/go/BB7IVChoXc

Комментарии:

1. И если разная высота для col-

2. Пожалуйста, добавьте изображения разной высоты к примеру

3. На самом деле ваши изображения недостаточно широкие, чтобы видеть, что столбцы заполняют правильную ширину: codeply.com/go/BB7IVChoXc

4. Isotope нарушал сетку Bootstrap v4, пока я не переместил селектор контейнера Isotope в тот же элемент, который имеет .row класс. Если вы видите, что элементы в вашей сетке неожиданно переносятся после добавления Isotope, попробуйте это.