第12回　masonryでコンテンツを隙間なく敷き詰め表示方法いろいろ試す

masonryプラグインを使用して、カラム（写真などコンテンツを含んだひとまとまりの要素）を一定サイズに整然と並べるのではなく、それぞれの持つ幅や高さを生かして、タイル状に隙間なく敷き詰めるレイアウトを作成してみます。バリエーションとして横幅サイズの異なるカラムの配置や、カラム幅の相対指定方法など配置を調整することもできます。

前回は、グラフィックスペースをブラウザ全体を使用してグラフィカルに見せる作例を作成しましたが、今回はPinterestのようなコンテンツの内容によって一定ではなく隙間なく埋めていくレイアウトをmasonryプラグインを使用して作成してみたいと思います。

■今回作成したサンプル

●コンテンツを敷き詰めるプラグイン「masonry」

今回使用する「masonry」プラグインは、コンテンツを含んだカラムをタイル状にレイアウトするためのプラグインです。要素がタイル状に自動レイアウトされるWebサイトが話題になり始めたころからオープンソースで提供されているjQueryプラグインで、導入されたWebサイトの事例も多くあります。

現在でもバージョンアップが重ねられていて、バージョン3ではHTML5の独自data属性に必要パラメータを設定するだけでJavascriptを一切記述しなくても導入できるなど、比較的容易に使用することができるようになっています。

●コンテンツを配置するHTML

コンテンツを敷き詰めるサイトを作成する場合、画像だけを使用する場合や画像とテキストなどの要素を入れたいなど目的によって表示させる内容が変わります。そこで、class（column）内に記述した内容を一つのブロックとして考えて作成することで、表示する内容を自由に調整することができます。

<div class="column">
<p class="photo"><img src="img/01.jpg" alt=""></p>
</div>

●コンテンツを敷きつめかた：写真サイズが共通の場合

画像サイズが一定の縦横比で並べる場合は、指定した段数で一定のグリッドレイアウトで配置されるので、敷き詰めるというよりは整列されたイメージで見ることができます。この場合は、「masonry」プラグインを使用するまでもなく、CSSのfloatプロパティで実現可能であり、1行4列のレイアウトの場合は、画像の並び方は左から「１→２→３→４」、１段下がり再び左から「５→６→７→８」とアルファベットの「Z」字状にジグザグに配置されていきます。

サイズが統一されている場合は整列される

●コンテンツを敷きつめかた：縦写真、横写真が混在する場合

縦写真、横写真が混在する場合は、floatで実装すると画像の並び方は左から「１→２→３→４」は変わりませんが、図のように「３」の画像がほかの画像よりも縦長の時、１段下がった後の「５」は、「３」と「４」の隙間に入り込むようなところに配置され、左側には画像が配置されないまま、大きな隙間を残してさらに１段下へ下がって一番左から「６→７→８→９」と配置されていきます。このようにCSSのみでは一定の秩序を乱す要素が存在すると以後の画像の配置が不安定になり、期待しているように隙間無く画像を敷き詰めることができません。

そこで、Javascriptによってレイアウトを調整するためにmasonryプラグインを導入するわけですが、このプラグインはグリッドと同様に単に左から「１→２→３→４」、１段下がって「５→６→７→８」と並べるわけではなく、「３」のような縦長の要素があったとき、その下に来る「７」と次の「８」の縦位置を比べ、「７」の方が「８」よりも下に配置されてしまうときは本来「８」の位置に「７」を配置し、本来「７」の位置だった「３」の下に「８」を配置するようになります。つまり、上から順番に画像の配置順（時系列順）に画像が表示されるように調整してくれるということです。

縦写真、横写真が混在する場合でも「masonry」プラグインによって、上から順番に画像の配置順に表示されるように調整してくれる

●コンテンツを敷き詰める基本設定

今回のサンプルの1つ目（sample1_basic.html）は、「masonry」プラグインを適用するコンテンツ全体を格納する要素（※以後、masonryコンテナ）の幅を1080ピクセルとし、その中に格納される写真などをコンテンツ内容を含んだ要素（※以後、カラム）1つの幅を270ピクセルと絶対値で設定した。masonryは、このカラムのサイズをCSSで指定すると同時に、Javascript上でmasonryメソッドを実行する際の引数のひとつ「columnWidth」にも、CSSで指定したカラムサイズと同じ値を設定しておく必要があります。このサンプルでは270に設定しました（※最新バージョンのmasonryではHTML5の独自data属性で「columnWidth」を設定することが可能です）。

;(function (d, $) {
  var jQdm_flexGrid;
  jQdm_flexGrid = function () {
    // 初期設定
    var param = {
      masonryTargetContainer: $('#photoGalleryContainer'),
      itemSelector: '.column',
      loaderSymbolSelector: '.loaderSymbol' // ローダー用のCSSセレクタ
    };
    // タイル上にレイアウトする複数要素を格納した、
    // masonryプラグインを適用するコンテナ要素
    // 扱いやすいように初期設定の変数から$containerに代入
    var　 $container = param.masonryTargetContainer;
    // masonryの基本設定を引数として、関数に渡し実行する
    $container.masonry({
      columnWidth: 270, // 整列用基本カラム幅（ピクセル）
      itemSelector: param.itemSelector // カラムのCSSセレクタ
    });
    // ロード中に表示するアニメーション画像の処理
    var LoaderSymbol = {
      init: function () {
        var _sel = param.loaderSymbolSelector;
        if ($(_sel).length == 0) {
          $('
').prependTo('body').addClass(replaceString(_sel, '€€.')).hide().fadeIn(1000);
        }
      },
      destroy: function () {
        $(param.loaderSymbolSelector).fadeOut(500,
          function () {
            $(this).remove();
            revealItems();
          });
      }
    };
    // 画像を全て読み込んだ後にmasonryを実行する
    LoaderSymbol.init();
    $container.imagesLoaded().done(function () {
      // 画像読み込み完了
      LoaderSymbol.destroy();
    });
    // 読み込んだ画像を表示する
    function revealItems() {
      var _elmes, _items;
      _elems = $container.masonry('getItemElements'),
      _items = $container.masonry('getItems', _elems);
      $container.children().css({
        visibility: 'visible'
      });
      $container.fadeIn().masonry('reveal', _items).masonry();
    }
    // 文字列置換処理
    function replaceString(_str, _bf, _af, _flg) {
      var _reg = new RegExp(_bf, _flg || '');
      return _str.replace(_reg, _af || '');
    }
  }
  jQdm_flexGrid();
})(document, jQuery);

■1カラム（段・グリッド）の基本設定CSS

.grid_container .column {
  width: 266px;
  padding: 5px;
  margin: 2px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  visibility: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

●表示させる段組の変更や全体の幅の調整

1つ目のサンプルではmasonryコンテナの幅は1080ピクセル、カラムの幅は270ピクセルとしているため、横１列ごとに1080÷270=4段のカラムが並ぶ計算になり、横１行ごとに並べます。

段数を変更したい場合は、単純にコンテナの幅やカラムの幅を変更すれば良いが、前述のようにカラムのは幅を変更した場合は、別途Javascriptでmasonryメソッドを実行する際の引数の１つ「columnWidth」の値も変更する必要があります。

縦写真、横写真でもカラムの幅は一定にレイアウトされる

.grid_container {
  width: 100%;
  margin: 0 0 50px;
}
.grid_container .column {
  width: 266px;
…省略…
}

$container.masonry({
   columnWidth: 270, // 整列用基本カラム幅（ピクセル）
   itemSelector: param.itemSelector // カラムのCSSセレクタ
 });

また、表示させたブラウザのサイズを後から変更した場合には、アニメーションしながら段組が変更されるようになっています。

ブラウザサイズが小さくなり一段分が入らない場合はアニメーションしながらカラムの段数が変更される

その他にも書籍の方ではカラムの幅を変えたり相対的なサイズ指定、画像拡大機能付などのバリエーションも作成しております。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

2015/2/4

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！