Masonry のかわりに Freetile で可変グリッドレイアウト

コーディングの話です。大きさの異なるブロックを隙間無くタイル状に整列してくれるプラグインがあります。


最も有名なのが「Masonry」だと思います。私も最初はこれを使おうと試してみました。
このようなhtmlソースがあったとして…

<div class="wrap">
    <div class="item">・・・</div>
    <div class="item">・・・</div>
    <div class="item">・・・</div>
</div>

スクリプトはこんな感じです。最近のMasonryはjQueryを必要としません。

<script src="masonry.pkgd.min.js"></script> 
<script> 
    $(function(){ 
        $('.wrap').masonry();  
    }) 
</script>

ところが私の環境ではうまく動きませんでした。内部ブロック間に（横方向の）隙間ができるのです。どうも一番最初のブロックの幅をその後のブロックが引きずってしまうようです。対処方法をネットで調べても「ブロック同士が重なってしまう」という事象は散見されますが、逆に「ブロック間に隙間が空く」という事象は見つけられませんでした。

ブロック同士の重なりの対処法としてはブロックの大きさを明示する方法と、「imagesloaded」を使用して画像ファイルを読み込んだ後にMasonryを実行させる方法があるようです。もちろん両方試してみましたが不具合は解消しませんでした。imagesloaded はjQueryが必要です。

<script src="jquery.min.js"></script>
<script src="magesloaded.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
<script>
    $(function(){
        var $container = $('.wrap');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector: '.item'
            });
        });
    });
</script>


いろいろ試してみましたがうまくいかず、他のモジュールを試してみることにしました。「Freetile」というものです。使い方はほとんど同じです。Freetile はjQueryが必要です。

<script src="jquery.min.js"></script>
<script src="jquery.freetile.min.js"></script> 
<script>
    $(document).ready(function(){
          $('.wrap').freetile({
             selector: '.item',
             animate : true
          });
    });
</script>


こちらはうまくいきました。

++++++++++++++++++++++++++++++++++++++++++++++++++++

2016/05/06追記

スクリプト無し、cssだけでMasonryレイアウトを実現できる driveway というものを見つけました。