In this article, I will explain to you how to integrate the masonry plugin.
The masonry plugin provides us to rearrange images or div blocks in sequence.
First, we need to create new project in the visual studio and give an appropriate name to it.
Download masonry.pkgd.min.js JavaScript file in Script folder of project which provide grid class or you can also use
<script src=”https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js”></script>
Create View for Index Action method as following:
<!DOCTYPE html>
<html>
<head>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
.grid {
background: #EEE;
max-width: 1200px;
}
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-sizer,
.grid-item {
width: 20%;
}
.grid-item {
height: 120px;
float: left;
background: #c7f6f5;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.grid-item--width2 {
width: 40%;
}
.grid-item--width3 {
width: 60%;
}
.grid-item--height2 {
height: 200px;
}
.grid-item--height3 {
height: 260px;
}
.grid-item--height4 {
height: 360px;
}
</style>
</head>
<body>
<div class="row">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
</div>
</body>
</html>
@section scripts{
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/masonry.pkdg.min.js"></script>
<script type='text/javascript'>
var $grid;
$(document).ready(function () {
masonryOptions = {
itemselector: '.grid-item',
horizontal: true,
percentPosition: true,
};
$grid = $('.grid').masonry(masonryOptions);
$grid.on('click', '.grid-item', function (event) {
$grid.masonry('remove', event.currentTarget)
.masonry();
});
});
</script>
}
OUTPUT:
