Filtering

Isotope可以通过filter参数选项隐藏和显示元素items。匹配的items被显示，不匹配的items被隐藏。

$container.isotope({...})

选择器

最简单的分类过滤元素的方法是通过选择器，像类选择器。例如：每一个item元素都有一组用于识别的class：transition, metal, lanthanoid, alkali等等。

<div id="container">
  <div class="item transition metal">...</div>
  <div class="item post-transition metal">...</div>
  <div class="item alkali metal">...</div>
  <div class="item transition metal">...</div>
  <div class="item lanthanoid metal inner-transition">...</div> 
  <div class="item halogen nonmetal">...</div> 
  <div class="item alkaline-earth metal">...</div>
  ...
</div>

可以通过filter option来设置一个选择器。匹配选择器的items将被显示，不匹配的会被隐藏。要匹配过滤出.metal项：

$container.isotope({ filter: '.metal' });

• '.alkali, .alkaline-earth' 将显示 .alkali 和 .alkaline-earth 项。
• '.metal.transition' 将显示同时具有 .metal 和 .transition class 的项。
• '*' 将显示所有的items。

jQuery 选择器

如果你的项目中使用jQuery,Isotope可以使用jQuery来对items进行分类过滤。你可以通过jQuery selectors来对items进行分类。例如：

• '.metal:not(.transition)' 将显示不带.transition class的 .metal元素项。

函数

你可以通过函数来对Items进行过滤。下面的例子是过滤item的数值大于50的item项。

<div id="container">
  <div class="item ..."><p class="number">80</p></div>
  <div class="item ..."><p class="number">42</p></div>
  <div class="item ..."><p class="number">20</p></div>
  <div class="item ..."><p class="number">75</p></div>
  ...
</div>

如果你使用jQuery, 你可以通过 functions in jQuery来分类过滤：

$container.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // `this` is the item element. Get text of element's .number
    var number = $(this).find('.number').text();
    // return true to show, false to hide
    return parseInt( number, 10 ) > 50;
  }
})

如果不使用jQuery，你也可以使用函数来进行分类过滤：

iso.arrange({
  // item element provided as argument
  filter: function( itemElem ) {
    var number = itemElem.querySelector('.number').innerText;
    return parseInt( number, 10 ) > 50;
  }
});

UI

上面的例子使用按钮来作为UI。每一个按钮使用data-filter属性来做相应的分类操作。

<div id="filters" class="button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".metal">metal</button>
  <button data-filter=".transition">transition</button>
  <button data-filter=".alkali, .alkaline-earth">alkali & alkaline-earth</button>
  <button data-filter=":not(.transition)">not transition</button>
  <button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>

在JS中，当一个按钮被点击的时候，你可以这个filter。

// init Isotope
var $container = $('#container').isotope({
  // options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Filter functions

要通过一个函数来过滤元素，可以使用使用关键字，并将它映射到一个对象中。

  <!-- in button group -->
  <button data-filter="numberGreaterThan50">number > 50</button>
  <button data-filter="ium">name ends with -ium</button>

// hash of functions that match data-filter values
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  // use filter function if value matches
  filterValue = filterFns[ filterValue ] || filterValue;
  $container.isotope({ filter: filterValue });
});

Other UI

你的节目可以不使用UI。你可以使用<select>、radio inputs或其它的元素。

• Select example
• Radio input example
• Filtering with a quick-search

Combination filters

可以对分类过滤进行组合。如果需要红色.red或高度.tall，你可以将选择器设置为.red.tall。

$container.isotope({...})

Combination filters UI

在下面的例子中，使用了按钮组button-group。每一个button-group按钮组都带有一个data-filter-group。

<div class="button-group" data-filter-group="color">
  <button data-filter="">any</button>
  <button data-filter=".red">red</button>
  <button data-filter=".blue">blue</button>
  <button data-filter=".yellow">yellow</button>
</div>

<div class="button-group" data-filter-group="size">
  <button data-filter="">any</button>
  <button data-filter=".small">small</button>
  <button data-filter=".wide">wide</button>
  ...
</div>

In the JavaScript, these filters are stored in an object, filters. When a button is clicked, it changes the filter for that group. The object’s values are then combined into one filter '.red.small'.

// store filter for each group
var filters = {};

$demo.on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = '';
  for ( var prop in filters ) {
    filterValue += filters[ prop ];
  }
  // set filter for Isotope
  $container.isotope({ filter: filterValue });
});

URL hash

You can hook filtering into the hashchange event so that Isotope filters can be applied as links. See filtering with URL hash example on CodePen, view code on CodePen.

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

$( function() {

  var $container = $('.isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'button', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $container.isotope({
      itemSelector: '.element-item',
      filter: hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});