dglushkov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.grid {
width: 90%;
margin: 7.5%;
box-sizing: border-box;
}
.grid-item {
width: 18%;
margin-right: 2px;
margin-bottom: 8px;
}
.w2 {
width: 36%;
}
.standard {
width: 9%;
height: 0;
visibility: hidden;
border: none;
}
.grid-item img {
width: 100%;
height: auto;
}
.grid-item img:hover {
-webkit-filter: brightness(75%);
}
.grid-item a:visited img {
-webkit-filter: sepia(100%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
$(function() {
var grid = $('.grid');
grid.imagesLoaded( function() {
grid.masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard"});
grid.masonry("layout");
});
grid.find('.grid-item').click(function(event){
event.preventDefault();
$(this).siblings().removeClass('w2');
$(this).toggleClass('w2');
$this = $(this);
grid.masonry( 'once', 'layoutComplete', function() {
var destination = $this.offset().top;
$('body,html').stop().animate({scrollTop: destination}, 500);
});
grid.masonry("layout")
});
});
</script>
</head>
<body>
<div class="grid">
<div class="grid-item">
<a href="#">
<img src="http://via.placeholder.com/350x150/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/480x320/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/240x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/320x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/640x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/320x640/"/>
</a>
<div class="standard"></div>
</div>
</div>
</body>
</html>