可変グリッドレイアウトを実装できるMasonry

可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Masonry」をご紹介します。

まずは、この可変グリッドを採用しているサイトを見てみましょう。

D＆DEPARTMENT PROJECT

SUPER ME INC.

東京デザイン事務所サガ

ブラウザの横幅を変える度にカラム数が変化し、コンテンツが移動しながら再配置される仕様になっています。

▼それでは、実際に作りながら見ていきましょう。

まずは、本家「Masonry」より「masonry.pkgd.min.js」をダウンロードしてください。

Masonry

Masonryとは…「れんが・石組・積石」などの意味があるようです。グリッドレイアウトがレンガを積み上げたようなビジュアルになっているため、このような名前が付いているようですね。

実際にサンプルを用意しましたので確認していきましょう。

DEMO

jQueryと「masonry.pkgd.min.js」を読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

JavaScriptを記述

<script type="text/javascript">
$(function(){
	$('#container').masonry({
	    isAnimated: true,
	    itemSelector: '.item',
	    isFitWidth: true
	});
});
</script>

$(function(){

$('#container').masonry({

isAnimated: true,

itemSelector: '.item',

isFitWidth: true

});

</script>

HTMLを記述

<ul id="container" class="motion">
	<li class="item">
		<div><a href="#"><img src="images/img1.jpg" /></a></div>
		<p class="cap"><a href="#">CAPTION</a></p>
		<p class="des">discription</p>
	</li>
</ul>

<p class="cap"><a href="#">CAPTION</a></p>

<p class="des">discription</p>

</li>

</ul>

CSSを記述

#wrapper {
  width:100%;
  margin: 0;
  padding: 0;
  position:relative;
}
header {
	background: url("../images/vertical_cloth.png");
	padding:10px;
	color:#fff;
	text-align:center;
	font-family: 'Alegreya SC', serif;
	font-weight: 900; 
}
#container {
  background: url("../images/retina_wood.png");
  padding:5px;
  margin: 0 auto;
}
#container:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.item {
  margin: 8px;
  width: 300px;
  padding: 8px;
  box-shadow:0 2px 5px #aaa;
  background:#FFF;
  color:#666;
  float: left;
  border-radius:5px;
  border-bottom:5px solid #3a3a3a;
}
.item img {
  width: 100%;
}
.item img:hover {
	opacity: 0.8;
}
.item div{
	border-bottom: 1px dashed #ccc;
	padding-bottom:5px;
}
.cap {
	margin: 10px 0 5px;
	font-weight:bold;
	font-size: 16px;
}
.des {
	font-size:12px;
}

#footer {
	margin: 0;
	text-align: center;
	padding:10px;
	background: #363636;
	background: url(../images/vertical_cloth.png);
	color:#FFF;
	font-family: 'Alegreya SC', serif;
	font-weight: 900;
}

#wrapper {

width:100%;

margin: 0;

padding: 0;

position:relative;

}

header {

background: url("../images/vertical_cloth.png");

padding:10px;

color:#fff;

text-align:center;

font-family: 'Alegreya SC', serif;

font-weight: 900;

}

#container {

background: url("../images/retina_wood.png");

padding:5px;

margin: 0 auto;

}

#container:after {

content: ".";

display: block;

clear: both;

height: 0;

visibility: hidden;

}

.item {

margin: 8px;

width: 300px;

padding: 8px;

box-shadow:0 2px 5px #aaa;

background:#FFF;

color:#666;

float: left;

border-radius:5px;

border-bottom:5px solid #3a3a3a;

}

.item img {

width: 100%;

}

.item img:hover {

opacity: 0.8;

}

.item div{

border-bottom: 1px dashed #ccc;

padding-bottom:5px;

}

.cap {

margin: 10px 0 5px;

font-weight:bold;

font-size: 16px;

}

.des {

font-size:12px;

}

#footer {

margin: 0;

text-align: center;

padding:10px;

background: #363636;

background: url(../images/vertical_cloth.png);

color:#FFF;

font-family: 'Alegreya SC', serif;

font-weight: 900;

}

以上で完成です。

DEMO

その他にも、いくつかのオプションがあるのでカスタマイズしてみてください。

オプション

●itemSelector

処理対象となる要素のclass名を指定する

●isAnimated

ウィンドウサイズを変更した際のレイアウト変更時のアニメーションの可否。デフォルトはfalse

●isFitWidth

containerのサイズを列幅に合わせて変更するかどうか。

●columnWidth

一列の幅を指定

●gutterWidth

要素間の幅の指定

●isResizable

ブラウザのウィンドウサイズが変わったときに並び替えをするかどうか。デフォルトはtrue

●isRTL

左上から右下に視線を動かすようなレイアウト対応にするかどうか。デフォルトはfalse

●animationOptions

アニメーションオプションを設定

詳しくは、本サイトのオプションをご確認ください。

Masonry -Options-

Pinterest