Shuffle JS - Basic Example

Shuffle JS - Basic Example

by Nikolay Petrov

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.js"></script>
	<h3>Filter</h3>

	<ul id="filter">
		<li><a class="active" href="#" data-group="all">All</a></li>
		<li><a href="#" data-group="red" class="">Red</a></li>
		<li><a href="#" data-group="green" class="">Green</a></li>
		<li><a href="#" data-group="blue">Blue</a></li>
		<li><a href="#" data-group="numbers">Numbers</a></li>
		<li><a href="#" data-group="letters">Letters</a></li>
		<li><a href="#" data-group="square" class="">Squares</a></li>
		<li><a href="#" data-group="circle" class="">Circles</a></li>
	</ul><!-- #filter -->

	<div id="grid">
		<div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>3</div>
		<div class="item green" data-groups='["all", "numbers", "green", "square"]'>5</div>
		<div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>D</div>
		<div class="item red"   data-groups='["all", "numbers", "red", "square"]'>1</div>
		<div class="item red circle"   data-groups='["all", "numbers", "red", "circle"]'>4</div>
		<div class="item red"   data-groups='["all", "numbers", "red", "square"]'>7</div>
		<div class="item green circle" data-groups='["all", "numbers", "green", "circle"]'>8</div>
		<div class="item red"   data-groups='["all", "letters", "red", "square"]'>B</div>
		<div class="item green" data-groups='["all", "numbers", "green", "square"]'>2</div>
		<div class="item green circle" data-groups='["all", "letters", "green", "circle"]'>C</div>
		<div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>9</div>
		<div class="item red"   data-groups='["all", "letters", "red", "square"]'>E</div>
		<div class="item blue circle"  data-groups='["all", "letters", "blue", "circle"]'>G</div>
		<div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>A</div>
		<div class="item blue"  data-groups='["all", "numbers", "blue",...

CSS

#container {width: 960px; margin: 0 auto;}
		#filter {list-style-type: none; margin: 0; padding: 0}
		#filter li, #filter a {display: block; float: left; margin: 0}
		#filter a { background: #ddd; border: 1px solid #666; text-decoration: none; padding: 5px 10px;}
		#filter a.active {background: yellow;}
		#grid {clear: both; position: relative}
		.item {width: 230px; height: 230px; background: grey; float: left; margin-right: 10px; margin-bottom: 10px; color: #fff; font-size: 60px; text-align: center; line-height: 230px; cursor: default;}
		.red {background: red;}
		.green {background: green;}
		.blue {background: blue;}
		.circle {border-radius: 230px;}

JavaScript

jQuery(document).ready(function() {

	/* initialize shuffle plugin */
	var grid = jQuery('#grid');

	grid.shuffle({
		itemSelector: '.item' // the selector for the items in the grid
	});

	/* reshuffle when user clicks a filter item */
	jQuery('#filter a').click(function (e) {
		e.preventDefault();

		// set active class
		jQuery('#filter a').removeClass('active');
		jQuery(this).addClass('active');

		// get group name from clicked item
		var groupName = jQuery(this).attr('data-group');

		// reshuffle grid
		grid.shuffle('shuffle', groupName );
	});

});