无法使用Bootstrap处理同位素 [英] Can't work with isotope with bootstrap

问题描述

我正在尝试将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!

这里是 Codepen链接

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

});

推荐答案

您需要添加 imagesloaded.js 到您的页面，然后使用此代码.卸载的图像可能会脱离同位素布局，并导致项目元素重叠

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

这是 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处理同位素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！