ブートストラップ付きアイソトープでは動作しません

Question

ブートストラップとアイソトープを統合しようとしていますが、すべての画像をクリックした後、初めて4つのイメージしかロードされません！何が間違っているのか分からない！ここで

これは私のHTMLでCodepen Link

です：

<div class="row"> 
    <div id="filters" class="button-group"> 
     <button class="button btn btn-primary is-checked" data-filter="*">show all</button> 
     <button class="button btn btn-primary" data-filter=".web">WEB</button> 
     <button class="button btn btn-primary" data-filter=".design">DESIGN</button> 
    </div> 
</div> 
<div class="container-fluid no-gutter"> 

    <div id="posts" class="row"> 
     <div id="1" class="item web col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600"> 
      </div> 
     </div> 
     <div id="2" class="item web col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/nature"> 
      </div> 
     </div> 
     <div id="3" class="item design col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/people/1"> 
      </div> 
     </div> 
     <div id="4" class="item design col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/technics"> 
      </div> 
     </div> 
     <div id="5" class="item web col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/transport/1"> 
      </div> 
     </div> 
     <div id="6" class="item design col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/sports"> 
      </div> 
     </div> 
     <div id="7" class="item web col-sm-3"> 
      <div class="item-wrap"> 
       <img class="img-responsive" src="//lorempixel.com/600/600/business/1"> 
      </div> 
     </div> 
    </div> 
</div> 

マイCSS：

.container-fluid.no-gutter { 
    padding: 0px; 
} 
.container-fluid.no-gutter .row [class*='col-']:not(:first-child), 
.container-fluid.no-gutter .row [class*='col-']:not(:last-child) 
{ 
    padding-right: 0; 
    padding-left: 0; 
} 

.row { 
    margin-left:0; 
    margin-right:0; 
} 

.item { 
    border: none; 
} 

/* Isotope Transitions 
------------------------------- */ 
.isotope, 
.isotope .item { 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -ms-transition-property:  -ms-transform, opacity; 
     -o-transition-property:   top, left, opacity; 
      transition-property:   transform, opacity; 
} 


/* responsive media queries */ 

@media (max-width: 768px) { 

} 

そして、JS：

$(document).ready(function() { 
    /* activate jquery isotope */ 
    var $container = $('#posts').isotope({ 
     isFitWidth: true, 
     itemSelector : '.item', 
    }); 

    $container.isotope({ filter: '*' }); 

    // filter items on button click 
    $('#filters').on('click', 'button', function() { 
     var filterValue = $(this).attr('data-filter'); 
     $container.isotope({ filter: filterValue }); 
    }); 

}); 

Answer 1

あなたはあなたにimagesloaded.jsを追加する必要がありますrページを開き、このコードを使用します。アンロードされた画像は、同位体のレイアウトをオフに投げると、アイテムの要素がここ

をオーバーラップすることがありますcodepen

$(document).ready(function() { 
/* activate jquery isotope */ 
var $container = 
    $('#posts').isotope({ 
    isFitWidth: true, 
    itemSelector : '.item', 
    filter: '*' 
}); 

$container.imagesLoaded().progress(function() { 
$container.isotope('layout'); 
}); 


// filter items on button click 
$('#filters').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $container.isotope({ filter: filterValue }); 
}); 

});