Can't work with isotope with bootstrap

问题

I'm trying to integrate bootstrap with isotope but only four image is loading first time, after clicking all it shows all the images! Can't figure out what's wrong!

Here is Codepen Link

This is my HTML :

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

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

}

And 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 });
    });

});

回答1:

You need to add imagesloaded.js to your page and then use this code. Unloaded images can throw off Isotope layouts and cause item elements to overlap

Here is a 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 });
});

});

来源：https://stackoverflow.com/questions/44725127/cant-work-with-isotope-with-bootstrap