emptyindorill,
вариант без плагина isotope
<!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;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
box-sizing: border-box;
}
.item.large {
width: 146px;
height: 146px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }
.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>
$(function() {
var chec = $("#filters input"),
item = $("#container .item");
chec.on("change", function() {
item.removeClass("is-filtered").css({
"order": chec.length
});
$.each(chec.filter(":checked"), function(i, el) {
item.filter(el.value).css({
"order": i
}).addClass("is-filtered")
})
})
});
</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>