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

您是否尝试过将 itemSelector 选项定义为 .col-md-4 或更好地声明指定的 class，例如 "grid-item"？

$('.grid').isotope({
   itemSelector: '.grid-item'
});

编辑：

我在 codepen 上放了一个工作示例： http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

Answer 2

2个问题。首先，过滤器适用于儿童，因此将 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>

其次，即使它确实有效，你也不会看到它。将最小宽度添加到 class

min-width: 100px;

这是一个有效的 fiddle：https://jsfiddle.net/shirandror/rvnrk2kc/

使用 bootstrap 进行同位素过滤

Isotope filtering with bootstrap

javascript

php

jquery

jquery-isotope