複数のイメージのサイズが違ってもPinterestのように綺麗にグリッドレイアウトを自動でしてくれる有名なプラグインMasonryをメモします。

プラグインをダウンロード

まずはMasonry のページの「Download masonry.pkgd.min.js」をダウンロードします。

Masonryのダウンロード

また、imagesLoadedプラグインをダウンロードします。これがないとレイアウトが崩れてしまうことがあるようなので、セットで設定しましょう。

imagesLoadedのダウンロード

jQueryプラグインMasonryを設置する

</body>の直前に設置します。

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

ギミックのスクリプトをfunction.jsに記述します。

基本のギミック

まずは、基本的なギミックを設定してみます。

function.js

jQuery(function($){
$(window).load(function(){
var $container = $('.masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry',
isFitWidth: true,
columnWidth: 330
});
});
});
});

css

.container{
width:1030px;
margin:0 auto;
text-align:center;
clear:both;
padding:50px 0px;
}
.container img{
max-width:100%;
height:auto;
}
.masonry-container{
width:100%;
margin:0 auto;
text-align:center;
}
.masonry{
display:inline-block;
margin:5px 5px;
}
.ww1{
width:320px;
}
.ww2{
width:650px;
}

ポイントはcolumnWidth: 330です。ここでイメージの幅を設定しています。ポイントはcolumnWidth: 330です。ここでイメージの幅を設定しています。
それに基づきcssでは1つのイメージに対し上下左右に5pxのmarginを設定します。330に対して左右に5pxのmarginを入れるので、実際のイメージ幅は320pxにします。もう一つは330*2＝660pxとしイメージ幅を650pxにします。

このようにcolumnWidthの数値に対してmarginを含めた幅サイズをcssで設定します。

デモはこちら

ブラウザサイズに応じて無効にする

レスポンシブに対応してブラウザサイズが幅480px以下の場合、Masonryを無効にします。

function.js

jQuery(function($){

var min_width = 480;
function masonry_update() {
var $container = $('.masonry-container');
if ( $('html').width() < min_width ) {
$container.masonry('destroy');
} else {
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry',
isFitWidth: true,
columnWidth: 330
});
});
}
}

masonry_update();

var timer = false;
$(window).resize(function(){
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
masonry_update();
}, 160);
}); 
});

css（メディアクエリ部分）

@media screen and (min-width: 320px) and (max-width: 480px){
.ww1{
width:160px;
}
.ww2{
width:160px;
}
}

デモはこちら

Lazy Loadを使用する

イメージが多い場合、イメージごとにローディングさせるLazy Loadを実装します。

プラグインをダウンロード

プラグインLazy Loadをダウンロードします。

Lazy Loadをダウンロード

Lazy Loadを設置する

</body>の直前に設置します。

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

function.js

jQuery(function($){

$("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 400
});

$(window).load(function(){
var $container = $('.masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry',
isFitWidth: true,
columnWidth: 330
});
});
});
});

lazyloadの設定は以下の部分です。

$("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 400
});

htmlの該当するimgタグにクラスを挿入します。

<img class="lazy" src="img/loading.gif" data-original="img/1.jpg">

デモはこちら

以上です。

今後も様々なオプションを検証したいと思います。