Milk+ea

Weblog Is My Hobby.

CSSのColumnを使って画像を敷き詰めるだけ※ただし↓→の順番

f:id:totora0155:20140829035902p:plain

(IE10未満は対応していません)

See the Pen 2014-08-30 by nju33 (@nju33) on CodePen.

作り方

HTML

ある要素の中にずらーっとimgを記述します。

<div>
  <img src="img.png">
  <img src="img.png">
  <img src="img.png">
  -*-*- 略 -*-*-

CSS

使うのはcolumn-countcolumn-gapだけ!

column-countは、カラムの数を指定します。
例えば、4と設定するだけで均等に幅が決められて4等分されます。
すべて違う大きさの画像を想定してるので、画像に対してwidth: 100%としてはみ出さないようにする必要はあります。

column-gapは、カラム間の幅を指定することができます。
今回は3pxと設定してみてます。

.top {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -ms-column-count: 4;
  -o-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 3px;
  -moz-column-gap: 3px;
  -ms-column-gap: 3px;
  -o-column-gap: 3px;
  column-gap: 3px;
}

.img {
  width: 100%;
}

でも使い道ないかも。