[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック

Post on:2011年7月27日

画像を隙間無く配置する実装方法

HTML

HTMLはimg要素をsection要素で内包したシンプルなものです。

<section id="photos">
  <img src="images/dog-1.jpg" alt="Little doggie">
  <img src="images/cat-1.jpg" alt="Little kittie">
  ...
</section>

CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。

デモページ：CSSオフの表示

こういったエレメントを垂直方向に隙間無く並べるには、jQueryのプラグイン「jQuery Masonry」を使用して解決することもできますが、JavaScriptの場合はwindow.resizeイベントに頼るという問題点があります。

ここではCSSだけを使用して、垂直方向に隙間無く並べます。
実装方法は「Masonry CSS」を参考にしました。

CSS

カラム間のgapは0にし、img要素の幅に100%を指定してカラムの幅をつくるようにします。

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

上記のスタイルシートで縦5列に配置されるようになりました。しかし、ブラウザのビューポートが狭い場合は5列だと狭く感じるかもしれません。
そこで、Media Queriesを利用してカラムの数を調整します。

CSS

ビューポートのサイズに合わせて、カラム数を変更します。

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}