无法使用 bootstrap 的同位素

Question

我正在尝试将 bootstrap 与 isotope 整合，但第一次只加载了四张图片，点击所有图片后显示了所有图片！想不通怎么了！

这是我的 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>

我的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 添加到您的页面，然后使用此代码。卸载的图像可能会影响 Isotope 布局并导致项目元素重叠

这是一个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 });
});

});

无法使用 bootstrap 的同位素

Can't work with isotope with bootstrap

jquery

html

css

twitter-bootstrap

jquery-isotope