Html 图像在第一次加载库时重叠

所以我在我的网站上用一个叫做同位素的过滤插件制作了一个画廊页面。 实时画廊链接：

我现在面临的问题是页面上的第一次加载，图像彼此重叠，当我转到我拥有的其中一个过滤器时，它是固定的。（手机和桌面有相同的问题）

我尝试过的一个修复方法是为图片设置一个高度，这似乎可行，但会破坏画廊的砖石外观。有什么建议可以让我做得更好吗？`还有可能是同位素网格的初始化没有加载

画廊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;
}

---

我刚刚弄明白，我使用了一个body onload函数，它在所有图像加载完毕后运行

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

函数运行（）{
变量$grid=$（'.grid'）。同位素({
itemSelector:“.element项”，
layoutMode:'砌体'//选项：https://isotope.metafizzy.co/layout-modes.html
});
}

我刚刚弄明白，我使用了一个body onload函数，在所有图像加载完毕后运行

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

函数运行（）{
变量$grid=$（'.grid'）。同位素({
itemSelector:“.element项”，
layoutMode:'砌体'//选项：https://isotope.metafizzy.co/layout-modes.html
});
}

问题可能是同位素库在图像加载之前被实例化，因此它不知道高度是多少。这个答案可能会有所帮助：是的！只是用OnLoad函数修复了这个问题。问题可能是你的同位素库在你的图像加载之前就被实例化了，所以它不知道高度是多少。这个答案可能会有所帮助：是的！只是用一个OnLoad函数修复了它