吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Plugin : Masonry

2014年3月6日 / category : jquery, plug-in-jquery

画面横幅に合わせて、要素を自動的に再配置してくれるMasonryというプラグインの紹介です。
http://masonry.desandro.com/

基本的な使い方は簡単です。

selectorA.masonry({
	itemSelector : selectorB
})

selectorA : 親となる要素
selectorB : 再配置する対象要素

JavaScript
$('#main').masonry({
	itemSelector : '.item'
});

上記を指定するだけで、使えます。下記にDEMOを紹介します。

DEMO 0

こちらのDEMOは、背景に画像を配置し、要素をCSSでwidth,height指定しております。
imgタグによる画像配置の場合は、少々やっかいです。
たくさんの画像を配置する場合、画像の読み込みに時間がかかってしまい、読み込み中にmasonryを設定してしまうと、横幅・高さの認識ができず、正しく表示されないのです。
それを回避するため、masonryを設定するタイミングを、すべての画像の読み込みが完了した後にする必要があります。
そこでもうひとつ便利なプラグインを用意します。

imagesLoaded
http://desandro.github.io/imagesloaded/

今回このプラグインの説明は省きますが、簡単です。

var container = document.querySelector( idName:String );
imagesLoaded( container, complate:Function );

idName : 親要素のid名
complate : 読み込み完了時の関数

また、画像をクリックすると画像が拡大縮小するギミックも追加してみます。そのため、masonryの設定方法も若干異なります。

DEMO 1

JavaScript
var masonry;

function init(){

	//画像のクリック設定
	var i;
	var _items = $('#main').find('div');
	for( i=0; i<_items.length; i++ ){
		$( $(_items[i]).find('img') ).on({
			'click': changeSize
		});
	}

	//画像の読み込み設定
	var container = document.querySelector('#main');
	imagesLoaded( container, function() {
		//画像の読み込み完了後、masonryを定義
		masonry = new Masonry( container );
	});

}

//画像のクリック処理
function changeSize(_e){
	$(_e.target).toggleClass('large');
	masonry.layout();
}

$(function(){ init(); });
CSS
.item p{
	padding: 6px;
}

.item img{
	width: 360px;
}

.item .large{
	width: 720px;
}

画像をクリックすると、largeクラスを追加します(既にある場合は、削除)。そして、masonryオブジェクトのlayoutメソッドを実行することで、再配置します。

他にも色々とメソッドが用意されているみたいですので、触ってみてください。ちなみに、IE7以下はサポートしていないみたいです。

DownLoad : DEMO DATA