MixItUp

We can also use Mixitup For including more content in a small space to show clients. It is a jQuery plugin providing animated filtering and sorting.Great for managing any categorised or ordered content like portfolios, galleries and blogs, MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.

Below is a sample HTML markup for the Mixitup :

	<style>
	.vv{ width:500px; background-color:#9C6; overflow:hidden;}
	.mix{ width:100px; height:100px; background-color:#C30; float:left; margin:10px;}
	.mix{
	display: none;
	}
	</style>

view raw MixItUp.css hosted with ❤ by GitHub

	<button class="filter" data-filter=".category-1">Category 1</button>
	<button class="filter" data-filter=".category-2">Category 2</button>
	<button class="sort" data-sort="my-order:asc">Ascending Order</button>
	<button class="sort" data-sort="my-order:desc">Descending Order</button>
	<div class="vv">

	<div class="mix category-1" data-my-order="1"> rewer 1</div>
	<div class="mix category-1" data-my-order="2"> rereerer2 </div>
	<div class="mix category-2" data-my-order="3"> rereer3 </div>
	<div class="mix category-2" data-my-order="4"> errere4 </div>
	</div>

view raw MixItUp.html hosted with ❤ by GitHub

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
	<script>
	$(function(){
	$('.vv').mixItUp();
	});

	</script>