Masonry filter red blocks

In this example below you will see how to do a Masonry filter red blocks with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by login2030, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright login2030 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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();
});

Comments