Kann nicht mit Bootstrap mit Isotop arbeiten

Question

Ich versuche, Bootstrap mit Isotop zu integrieren, aber nur vier Bilder laden zum ersten Mal, nach dem Klicken auf alle zeigt es alle Bilder! Kann nicht herausfinden, was los ist!

Hier ist Codepen Link

Das ist mein HTML ist:

<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> 

Meine 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) { 

} 

Und 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

Sie müssen imagesloaded.js Sie hinzufügen r Seite und dann diesen Code verwenden. Abgeladen Bilder können Isotopen Layouts abwerfen und verursachen Artikel Elemente

Hier ist ein 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 }); 
}); 

});