emptyindorill,
что-то вроде этого?
Там чуть доделать нужно, чтоб чекбоксы заработали. Но можно и так мышью нажимать на элементы - главное идея)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filters">
<input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
<input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
<input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
<input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>
<script>
var arr = document.querySelectorAll('.item');
window.onload = function(){
for(var i = 0; i < arr.length; i++){
arr[i].onclick = filtr;
}
}
function filtr(){
var x = this.classList[1];
var temp = [];
for(var i = 0; i < arr.length; i++){
if(arr[i].classList.contains(x)){
temp[temp.length] = arr[i];
}
}
/*console.log(temp);*/
/*тут можно добавить выбранным элементам свой класс или сделать с ними что-то другое*/
for(var k = 0; k < temp.length; k++){
temp[k].classList.toggle('myClass');
}
}
</script>
<style>
.myClass{
border-radius:50%;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#container {
border: 1px solid;
padding: 3px;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;
}
.item.large {
width: 146px;
height: 146px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
.item.is-filtered {
border: 3px solid #000;
}
</style>
</body>
</html>