Маржа между предметами после третьего ряда - PullRequest
Новая
       39

Маржа между предметами после третьего ряда

0 голосов
/ 03 ноября 2019

Я настраиваю портфолио, используя изотоп v3 и загрузчик 4. Я не понимаю, почему я получаю такой странный интервал между строками. Этот интервал исчезает, когда вы снова нажимаете фильтр «Все» или другие кнопки

http://testrework.altervista.org/

<script>
         var $grid = $('.grid').isotope({
          layoutMode: 'masonry',
      itemSelector: '.grid-item',
      percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer',

  },
        getSortData: {
          name: function (element) {
            return $(element).text();
          }
        }
      });
      $('.shuffle-button').on( 'click', function() {
  $grid.isotope('shuffle');
});

      $('.filter button').on("click", function () {
        var value = $(this).attr('data-name');
          $grid.isotope({
            filter: value
          });
        $('.filter button').removeClass('active');
        $(this).addClass('active');
      })
      $('.sort button').on("click", function () {
        var value = $(this).attr('data-name');
        $grid.isotope({
          sortBy: value
        });
        $('.sort button').removeClass('active');
        $(this).addClass('active');
      })


    </script>



.grid{

  background-color: blue;
}
  .grid-sizer,
  .grid-item { width: 20%; 


 }

И вот как форматируется сетка 

<div class="grid" >
    <div class="grid-sizer"></div>

    <div class="grid-item flower"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>
    <div class="grid-item bird"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>
    <div class="grid-item fruit"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>

</div>

Похоже, это произойдет, только если я выйду на третий ряд, кто-нибудь знает, что происходит? В прошлом я использовал старую версию изотопа, но теперь я немного потерян: /

...