Изображения перекрываются при первой загрузке галереи

Question

Итак, я создаю страницу галереи на своем веб-сайте, используя плагин фильтрации под названием Isotop. Ссылка на живую галерею: carroofies.com / gallery

Прямо сейчас я столкнулся с проблемой при первой загрузке страницы, изображения накладываются друг на друга, и это исправлено. когда я go на один из фильтров, которые у меня есть. (у мобильных и настольных компьютеров такая же проблема.) Есть предложения, как я могу сделать это лучше? `Это также может быть инициализация сетки Isotope, которая не работает при загрузке.

Галерея JS:

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'masonry'   //options: https://isotope.metafizzy.co/layout-modes.html
});
// filter functions
var filterFns = {
//   // show if number is greater than 50
//   numberGreaterThan50: function() {
//     var number = $(this).find('.number').text();
//     return parseInt( number, 10 ) > 50;
//   },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// bind filter button click
$('.filters-button-group').on( 'click', 'span', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'span', function() {
    $buttonGroup.find('.active').removeClass('active');
    $( this ).addClass('active');
  });
});

Соответствующие CSS:

/* ---- .element-item ---- */

.element-item {
  /*height: 150px;*/
}

/*@media (min-width: 992px){*/
/*    .filtr-item{*/
/*    height: 150px;*/
/*    }*/
/*}*/


/*POTENTIAL FIXES FOR OVERLAPPING IMAGES ABOVE^^^*/
/*-----------------------------------------------*/

/*@media (min-width: 460px){*/
/*    .col-sm-3 {*/
/*        flex: 0 0 25%;*/
/*        max-width: 25%;*/
/*    }*/
/*}*/

@media (max-width: 576px){
    .filtr-item {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media (max-width: 350px){
    .filtr-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.filtr-container {
  margin: 0 -4px;
}

.filtr-item img{
    border-radius: 5px;
    cursor: pointer;
}

.filtr-item a{
    transition: .5s ease !important;
}

/*image hover effect*/
@media only screen and (min-width: 600px){
    .filtr-item a:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        box-shadow: 0 10px 10px rgba(0, 0, 0, .15) !important;
    }
}

.filtr-item {
  padding: 4px;
}

.filtr-controls {
  font-family: Gilroy;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  margin: 30px 0 15px;
  transition: .5s ease;
}

.filtr-controls span {
    display: inline-block;
    font-size: 15px;
    margin: 5px 10px;
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    color: white;
    background-color: #323232;
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s ease;
}

.filtr-controls span:hover, .filtr-controls span.active {
  color: #0fc3f9;
  transition: .5s ease;
}

.filtr-controls span.active:after {
  font-family: FontAwesome;
  content: '\f111 ';
  font-size:6px;
  width: 0;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 46%;
  background: transparent;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

/*.filtr-controls span.active:after {*/
/*  width: 100%;*/
/*  left: 0;*/
/*  background: #000;*/
/*}*/

/*@media (max-width:300px) {*/
/*  .filtr-item {*/
/*    width: 100%;*/
/*  }*/
/*}*/

.filtr-item > a {
  position: relative;
  display: block;
}

.filtr-item > a:before, .filtr-item > a:after {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.filtr-item > a:before {
  content: ' ';
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  transition: .5s ease;
}

Answer 1

Только что понял, я использовал функцию загрузки тела, которая запускается, когда все изображения завершили загрузку

<script>
    function run(){
        var $grid = $('.grid').isotope({
          itemSelector: '.element-item',
          layoutMode: 'masonry'   //options: https://isotope.metafizzy.co/layout-modes.html
        });
    }
</script>