emptyindorill,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#container {
border: 1px solid;
padding: 3px;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;
box-sizing: border-box;
}
.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script>
$(function() {
var $container = $("#container"),
$checkboxes = $("#filters input");
$container.isotope({
itemSelector: ".item",
getSortData: {
cls: function(itemElem) {
var chec = $checkboxes.filter(":checked").get();
for (var i = 0; i < chec.length; i++) {
var cls = chec[i].value.slice(1);
if (itemElem.classList.contains(cls)) {
itemElem.classList.add("is-filtered");
return i
}
}
itemElem.classList.remove("is-filtered");
return i
}
},
sortBy: "cls"
});
$checkboxes.change(function() {
$container.isotope("updateSortData").isotope()
})
});
</script>
</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>
</body>
</html>