<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>
<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>
<script>
$(document).ready(function() {
$('.grid').imagesLoaded( function() {
$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard"});
});
$('.grid').masonry("layout");
$('.grid-item').click(function(event){
event.preventDefault();
$(this).siblings().removeClass('w2');
$(this).addClass('w2');
$this = $(this);
$('.grid').masonry( 'on', 'layoutComplete', function() {
destination = $($this).offset().top;
$('body').animate({scrollTop: destination}, 500).off();
});
$('.grid').masonry("layout")
});
});
</script>