Skip to content

Instantly share code, notes, and snippets.

@prosantamazumder

prosantamazumder/index.html

Created August 23, 2017 20:05
Show Gist options
  • Save prosantamazumder/5b11f4dc97a45c54e63069fe74e2e55a to your computer and use it in GitHub Desktop.
Save prosantamazumder/5b11f4dc97a45c54e63069fe74e2e55a to your computer and use it in GitHub Desktop.
Download ZIP
Isotope with masonry jQuery Plugin
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Isotope Filtering</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!--start page content-->
<div class="isotope-filtering-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="protfolio-menu text-center">
<button class="active" data-filter="*">show all</button>
<button data-filter=".cat1">metal</button>
<button data-filter=".cat2">transition</button>
<button data-filter=".cat3">alkali & alkaline-earth</button>
<button data-filter=".cat4">not transition</button>
<button data-filter=".cat5">metal but not transition</button>
</div>
</div>
</div>
<div class="row">
<div class="grid">
<div class="col-md-8 grid-item cat1 cat5">
<div class="protfolio-item">
<img src="img/p2.jpg" alt="">
</div>
</div>
<div class="col-md-4 grid-item cat2">
<div class="protfolio-item">
<img src="img/p1.jpg" alt="">
</div>
</div>
<div class="col-md-8 grid-item cat2 cat5">
<div class="protfolio-item">
<img src="img/p3.jpg" alt="">
</div>
</div>
<div class="col-md-3 grid-item cat1 cat5">
<div class="protfolio-item">
<img src="img/p4.jpg" alt="">
</div>
</div>
<div class="col-md-8 grid-item cat3 cat4">
<div class="protfolio-item">
<img src="img/p5.jpg" alt="">
</div>
</div>
<div class="col-md-6 grid-item cat2">
<div class="protfolio-item">
<img src="img/p6.jpg" alt="">
</div>
</div>
<div class="col-md-2 grid-item cat3">
<div class="protfolio-item">
<img src="img/p7.jpg" alt="">
</div>
</div>
<div class="col-md-4 grid-item cat3 cat4">
<div class="protfolio-item">
<img src="img/p8.jpg" alt="">
</div>
</div>
<div class="col-md-10 grid-item cat1 cat5">
<div class="protfolio-item">
<img src="img/p9.jpg" alt="">
</div>
</div>
<div class="col-md-2 grid-item cat4 cat5">
<div class="protfolio-item">
<img src="img/p10.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: 1
}
})
// filter items on button click
$('.protfolio-menu').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
//for menu active class
$('.protfolio-menu button').on('click', function(event) {
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
Raw
style.css
img {
width: 100%;
}
.protfolio-menu{}
.protfolio-menu button {
display: inline-block;
}
.protfolio-menu button.active {
background: red;
color: #fff;
}
.protfolio-item {
margin-bottom: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment