Бутстрап 4 + Изотоп - PullRequest
Новая
       30

Бутстрап 4 + Изотоп

3 голосов
/ 23 марта 2019

У меня простой проект. Я использую изотоп для кладки сетки и 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 неверен .

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

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

1 Ответ

4 голосов
/ 23 марта 2019

Я думаю, что вы хотите использовать 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

...