スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」

2013年4月4日jQueryプラグイン活用

jQueryプラグイン「Shuffle.js」を使うことで、要素や画像をスタイリッシュなアニメーションで絞り込んだり・ソートすることができます。

JavaScript

(function($){
	$(function() {
		$('#sort li').on('click', function() {
			var $this = $(this),
			$grid = $('#itemList');
			$('#sort .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});
		$('#itemList').shuffle({
			group: 'all',
			speed: 400,
			easing: 'ease-in-out'
		});
	});
})(jQuery);

HTML

<div id="sortArea">
	<div id="sort">
		<ul>
			<li data-group="all" class="active">All</li>
			<li data-group="html">HTML</li>
			<li data-group="css">CSS</li>
			<li data-group="javascript">JavaScript</li>
		</ul>
	</div>
	<div id="itemList">
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item css" data-groups='["html"]'>HTML</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
	</div>
</div>