メイソンリー

HTML

<div class="grid">
<div class="grid-item"><img src="URL" alt=""></div>
<div class="grid-item"><img src="URL" alt=""></div>
・・・
・・・
<div class="grid-item"><img src="URL" alt=""></div>
</div>

HTML説明

1. 親要素のdivにクラス「grid」を設定します。
2. 子要素に画像を配置するdivを設定します。
3. 子要素のdivにクラス「grid-item」を設定します。
4. 子要素のdivに画像を挿入します。

CSS

.grid-item{
width: 240px;
}
.grid-item img {
width: 95%;
}

CSS説明

1. 画像を挿入するボックスサイズを設定します。
2. 画像のサイズを設定します。

ジャバスクリプト

<script>
　$(function() {
　 $('.grid').masonry({
　 // options
　itemSelector: '.grid-item',
　columnWidth: 240
　});
});
</script>