CSSのColumnを使って画像を敷き詰めるだけ※ただし↓→の順番
例
(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-count
とcolumn-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%; }
でも使い道ないかも。