<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Masonry filter red blocks</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h2>Отфильтруйте так. чтобы остались только красные блоки:</h2>
<button id="filter">Оставить красные блоки</button>
</header>
<div class="row">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item red"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item red"></div>
<div class="item green"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/masonry/4.1.1/masonry.pkgd.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/login2030/masonry-filter-red-blocks-EZNENg */
.hide {
display: none !important;
}
header {
text-align: center;
padding-bottom: 25px;
}
.green {
background: #008080;
}
.red {
background: #ff6347;
}
.blue {
background: #87ceeb;
}
.row {
display: block;
margin: 0;
padding: 0;
box-sizing: border-box;
zoom: 1;
width: 650px;
margin: auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.item {
display: block;
margin: 0;
padding: 0;
box-sizing: border-box;
float: left;
height: 100px;
width: 200px;
margin-bottom: 10px;
}
.grid-sizer {
width: 200px;
}
.gutter-sizer {
width: 25px;
}
/*Downloaded from https://www.codeseek.co/login2030/masonry-filter-red-blocks-EZNENg */
var row = $('.row'),
item = $('.item'),
red = $('.red');
row.masonry({
itemSelector: '.item',
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
});
$('#filter').on('click', function () {
item.addClass('hide');
red.removeClass('hide');
row.masonry();
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v3.1.0
