Как отфильтровать блоки на странице?

Question

[Влад Серов]

Доброго дня.

Нужно фильтровать блоки на странице по нескольким параметрам. Блоки содержат в себе описание модели, нужно их сортировать по одному или нескольким параметрам (пример ниже).

Гугл не спас, либо фильтр по одному параметру, либо что-то совсем древнее. Может есть у кого в закромах ссылка на что-то схожее?

С JavaScript или Jquery у меня туговато, потому с нуля написать не могу.)

Вот пример вариации фильтра:

Answer 1

[inkShio]

Isotope - подойдет?

Comments

[Влад Серов]

О, это максимально подходит. Буду цеплять. Спасибо!

[Влад Серов]

А есть опыт в работе с ни? Я подключил, всё работает. НО когда я выбираю два параметра он показывает и объекты с первого и объекты с второго.

А мне нужно, чтобы показывало ТОЛЬКО смежные. Только блоки в которых есть первый класс и второй. Не могу найти исключение у них в документациях

Вот так вывожу:

// templating
var colors = [ 'classic', 'modern', 'plenka', 'massiv', 'plastik' ];

// init Isotope
var $container = $('.container2').isotope({
  itemSelector: '.item'
});

var $output = $('#output');

// filter with selects and checkboxes
var $checkboxes = $('#form-ui input');

$checkboxes.change( function() {
  // map input values to an array
  var inclusives = [];
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // if checkbox, use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });

  // combine inclusive filters
  var filterValue = inclusives.length ? inclusives.join(', ') : '*';

  $output.text( filterValue );
  $container.isotope({ filter: filterValue })
});

[inkShio]

Влад Серов, с ним не работал, посмотрел мельком документацию, там есть Combination filters, возможно это то что ты ищешь.