フィルターをかけられたり、ソートもできる超高機能jQueryギャラリー［MixItUp］の紹介です。

まずは公式サイトからプラグイン本体をダウンロードしてきましょう。

https://www.kunkalabs.com/mixitup/

ダウンロードしてきたファイル（jquery.mixitup.js）を、jQuery本体とともに<head>〜</head>タグ内で読み込みます。

その後、<body>〜</body>の中にギャラリー部のコンテンツを記述します。

<div class="controls">
<label>Filter:</label>
	<button class="filter" data-filter="all">All</button>
	<button class="filter" data-filter=".category-1">Category 1</button>
	<button class="filter active" data-filter=".category-2">Category 2</button>
  
<label>Sort:</label>
	<button class="sort" data-sort="myorder:asc">Asc</button>
	<button class="sort" data-sort="myorder:desc">Desc</button>
</div>

<div id="container" class="container">
	<div class="mix category-1" data-myorder="1"></div>
	<div class="mix category-1" data-myorder="2"></div>
	<div class="mix category-1" data-myorder="3"></div>
	<div class="mix category-2" data-myorder="4"></div>
	<div class="mix category-1" data-myorder="5"></div>
	<div class="mix category-1" data-myorder="6"></div>
	<div class="mix category-2" data-myorder="7"></div>
	<div class="mix category-2" data-myorder="8"></div>
  
	<div class="gap"></div>
	<div class="gap"></div>
</div>

要素の最後に <div class="gap"></div>というコードを記述して、空のボックスを２つ作っています。
実はコレが意外と重要なポイントになります。

どういうことかというと、［MixItUp］は各要素を配置する際、スタイルシートの text-align:justify; を利用するため、あえて空の要素を作っておかないと表示が崩れる原因になってしまうからです。

そして続いてはjQueryの設定です。

$(function(){
$('#Container').mixItUp();
});

ここではギャラリー内のコンテンツを内包する要素［#container］を指定します。

また、いくつかのオプションも設定できるようになっています。

例えば基本的な要素の操作に関するオプションは以下の6つが用意されていますね。

  • animation
  • callbacks
  • controls
  • layout
  • load
  • selectors

その他、細かい設定のためのAPIメソッドも各種用意されています。
この辺りの詳しい情報は公式サイトをご覧いただいたほうが早いかもしれませんね。

MixItUp : Documentation

最後にスタイルシートです。
重要なポイントは、MixItUp を効かせる要素に対して「display:none;」を指定すること。こうしておかないと表示がズレたり、おかしな挙動になってしまったりと、エラーの原因になります。

.container {
	padding:2%;
	text-align:justify;
}

.container .mix,
.container .gap {
	display:inline-block;
	width:49%;
}

#container .mix {
	display:none;
}

また前述のとおり、親要素には「text-align:justify;」を効かせておきます。

簡単に紹介しましたが、基本的には中級者〜向けのjQueryプラグインです。しかし記載したコードをコピペすれば初心者の方でも充分に使いこなせると思います。
サンプルも用意したので合わせてご覧ください。

サンプル：MixItUp

お気付きのとおり［Masonry］に似た動きをしますね。