Pinterestのようなレンガ状(タイル状)に写真を並べるレイアウトの作り方についてご紹介。

一番オーソドックスな方法としては、javascriptを使う方法。
自作をしなくても、既にjQueryプラグインで「Wookmark.js」というものがあるので、今回はこれの記述方法について。

サンプル

See the Pen XBRVrZ by Tora (@webtoranomaki) on CodePen.

コード

HTML


<div class="box">
	<ul>
		<li><img src="image.jpg" alt=""></li>
		<li><img src="image.jpg" alt=""></li>
		<li><img src="image.jpg" alt=""></li>
	</ul>  
</div>

CSS


/* reset */
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	display: block;
}

/* style */
.box {
	position: relative;
	width: 620px;
}
.box ul {
	width: 620px;
	overflow: hidden;
}
.box li {
	width: 200px;
}

Javascript

ライブラリやプラグインファイルを読み込む。


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://webtoranomaki.com/demo/static/img/js/wookmark/jquery.wookmark.min.js"></script>
<script type="text/javascript" src="https://webtoranomaki.com/demo/static/img/js/imagesloaded/jquery.imagesloaded.js"></script>

スクリプトを記述する。


var $item = $('li');
$item.imagesLoaded(function() {
	var options = {
		autoResize: false, //ブラウザリサイズに合わせて要素を更新するかどうか
		container: $('.box'), // コンテナを指定
		itemWidth: 200, // 列の幅を指定
		offset: 10, // コンテナと要素間
		fillEmptySpace: true // 最後の空いたスペースを「.wookmark-placeholder」で埋める
	};
	var handler = $('li'); // レンガ状にする要素を指定
	handler.wookmark(options); // wookmarkをオプション付きで実行
});

解説

画像を取り扱うスクリプト系のお約束だが、本wookmark.jsも、画像を読み込んでからスクリプトを実行しないと高さがちゃんと確保されない。なので、こういうケースではお馴染みのimagesloaded.jsも合わせて利用している。もしくは、以下のようにloadを使う方法でもいけるはず。


$(window).load(function(){
    //ここにスクリプトを記述
});