Question

我试图将bootstrap与同位素集成，但第一次只加载了四个图像，点击全部后显示所有图像！无法弄清楚出了什么问题！

这是我的HTML：

HashSet

我的CSS：

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

和JS：

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

}

Answer 1

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

这是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一起工作

1 个答案: