javascript - 使用 Bootstrap 进行同位素过滤

Question

我正在努力将同位素插件与 bootstrap 结合使用，但遇到了一些麻烦。我需要同位素元素 gallery-image-a 周围的 col-md-4 div，因此 .grid 不是同位素元素。一旦我摆脱了我需要的 col-md-4 div，插件就可以工作了。

想知道是否有人知道如何在保留 isotope 功能的同时保留现有标记。插入？

HTML 片段 1

  <span class="menu-button" id="food-button">Food</span>
  <span class="menu-button" id="staff-button">Staff</span>
  <span class="menu-button" id="all-button">All</span>

HTML 片段 2

  <div class="container">
        <div class="row grid">
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
       </div>
    </div>

CSS

.gallery-image-a {
    display:block;
    height:360px;
    background-position:center center;
    transition: ease all 950ms;
    background-repeat:no-repeat;
    box-sizing: border-box;
    border:10px solid #fff;
    background-size:cover;
    background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}

JavaScript

$grid = $('.grid');
$grid.isotope();

$('#food-button,#staff-button, #all-button').click(function(){
    var id = $(this).attr('id');
    var className = id.replace("-button", "");

    if (className == 'all') {
        $grid.isotope({ filter: '*' });
        return false;
    }
    $grid.isotope({ filter: '.' + className });
});

Answer 1

2个问题。首先，过滤器适用于 child ，因此将 HTML 更改为此

 <div class="container">
        <div class="row grid">
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
       </div>
    </div>

第二，即使它确实有效，你也不会看到它。将最小宽度添加到类

min-width: 100px;

这是一个工作 fiddle :https://jsfiddle.net/shirandror/rvnrk2kc/