Isotope sorting plugin
##Isotope sorting plugin setup
###1. Install
bower install isotope
###2. Usage
#####2.1 CONNECT JS TO HTML
<!-- Plugins JavaScript -->
<script src="js/isotope.pkgd.min.js"></script>
#####2.2 HTML
<div class="row">
<div id="filters" class="portfolio-filters text-center col-md-6 col-md-offset-3">
<ul class="list-inline">
<li><a class="btn btn-default active" id="all" href="#portfolio" data-filter="*">All</a></li>
<li><a class="btn btn-default" href="#portfolio" data-filter=".web">Web</a></li>
<li><a class="btn btn-default" href="#portfolio" data-filter=".apps">Apps</a></li>
<li><a class="btn btn-default" href="#portfolio" data-filter=".icons">Icons</a></li>
</ul>
</div>
<!-- /#filters -->
</div>
<!-- /.row -->
<div id="posts" class="row">
<div class="item col-md-6 text-center web icons">
<img src="http://placehold.it/200x200" alt="" />
<h3>1stPostItemHeading</h3>
</div>
<!-- /.item -->
<div class="item col-md-6 text-center apps icons">
<img src="http://placehold.it/200x200" alt="" />
<h3>1ndPostItemHeadingI</h3>
</div>
<!-- /.item -->
<div class="item col-md-6 text-center icons">
<img src="http://placehold.it/200x200" alt="" />
<h3>3rdPostItemHeading</h3>
</div>
<!-- /.item -->
<div class="item col-md-6 text-center web app">
<img src="http://placehold.it/200x200" alt="" />
<h3>4thPostItemHeading</h3>
</div>
<!-- /.item -->
</div>
<!-- /#posts.row -->
#####2.3 CSS
#filters {
.btn {
font-size: 18px;
color: #3c4761;
border-color: transparent;
text-transform: uppercase;
background: rgba(0,0,0,.1);
box-shadow: none;
.transition-all;
&:hover,
&.active {
background: #fff;
}
}
}
.item {
h3 {
color: #3c4761;
font-size: 20px;
text-transform: uppercase;
}
}
#####2.4 JS
// Isotope
$(window).load(function(){
$(function(){
var $container = $('#posts');
$container.isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$('#filters a').removeClass('active');
$(this).addClass('active');
$container.isotope({ filter: filterValue });
});
});
});