Filter

<div class="filter">
  <ul class="filter__controls">
    <li class="active"><a href="#" class="btn btn-default filter__controls-link" data-filter="all">все</a></li>
    <li><a href="#" class="btn btn-default filter__controls-link">Nan</a></li>
    <li><a href="#" class="btn btn-default filter__controls-link" data-filter=".entry">entry</a></li>
    <li><a href="#" class="btn btn-default filter__controls-link" data-filter=".h2">h2</a></li>
    <li><a href="#" class="btn btn-default filter__controls-link" data-filter=".w2">w2</a></li>
    <li><a href="#" class="btn btn-default filter__controls-link" data-filter=".w2 .h2">w2 + h2</a></li>
  </ul>
  <div class="grid filter__items">
    <div class="filter__item entry entry w2 h2">
      <img src="http://placehold.it/200x200/663399?text=entry%20w2%20h2">
    </div>
    <div class="filter__item entry">
      <img src="http://placehold.it/200x200/000000?text=entry">
    </div>
    <div class="filter__item w2">
      <img src="http://placehold.it/200x200/319999?text=w2">
    </div>
    <div class="filter__item h2">
      <img src="http://placehold.it/200x200/122814?text=h2">
    </div>
    <div class="filter__item entry h2">
      <img src="http://placehold.it/200x200/123456?text=entry%20h2">
    </div>
    <div class="filter__item entry w2">
      <img src="http://placehold.it/200x200/258912?text=entry%20w2">
    </div>
    <div class="filter__item w2 h2">
      <img src="http://placehold.it/200x200/663300?text=w2%20h2">
    </div>
    <div class="filter__item">
      <img src="http://placehold.it/200x200/999111?text=NaN">
    </div>
  </div>
</div>

jQuery

// filter
$(function() {
  $('.filter__controls-link').on('click', function(e) {
    var  $filterItem    = $('.filter__item'),
         filterData     = $(this).data('filter') || '',
         filterControls = filterData.split(' ');

    $filterItem
      .stop().fadeOut(0)
      .filter(function() {
        var $this = $(this);
        for (var i = 0; i < filterControls.length; i ++) {
          // display all items
          if (filterControls[i].indexOf('all') !== -1) {
            return $this;
          }

          // filter items
          if ($this.is(filterControls[i]) === true)  return $this;
        }
      }).stop().fadeIn('slow', function() {
        $(window).triggerHandler('resize');
      });
    e.preventDefault();
  });
});

Pug

.filter
  ul.filter__controls
    li.active
      a.btn.btn-default.filter__controls-link(href='#', data-filter='all') все
    li
      a.btn.btn-default.filter__controls-link(href='#') Nan
    li
      a.btn.btn-default.filter__controls-link(href='#', data-filter='.entry') entry
    li
      a.btn.btn-default.filter__controls-link(href='#', data-filter='.h2') h2
    li
      a.btn.btn-default.filter__controls-link(href='#', data-filter='.w2') w2
    li
      a.btn.btn-default.filter__controls-link(href='#', data-filter='.w2 .h2') w2 + h2
  .grid.filter__items
    .filter__item.entry.entry.w2.h2
      img(src='http://placehold.it/200x200/663399?text=entry%20w2%20h2')
    .filter__item.entry
      img(src='http://placehold.it/200x200/000000?text=entry')
    .filter__item.w2
      img(src='http://placehold.it/200x200/319999?text=w2')
    .filter__item.h2
      img(src='http://placehold.it/200x200/122814?text=h2')
    .filter__item.entry.h2
      img(src='http://placehold.it/200x200/123456?text=entry%20h2')
    .filter__item.entry.w2
      img(src='http://placehold.it/200x200/258912?text=entry%20w2')
    .filter__item.w2.h2
      img(src='http://placehold.it/200x200/663300?text=w2%20h2')
    .filter__item
      img(src='http://placehold.it/200x200/999111?text=NaN')