高さの違う画像をcssのみでタイルのように並べたい場合

写真をかっこよく並べたい。

なかなか難しい

特にギャラリーを自作した場合など、そう思いますよね。
いや、私はギャラリー作れないのですが。
サイト内の画像がPinterestのようなレイアウトにできたら……!

jQueryプラグインなどで対応可能のようですが、ここは敢えてcssのみでできたらうれしいな、などと他力本願な私の願いを叶えてくれる記事を発見しました。

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

プラグインからヒントを得て実装するなど、私には到底できません。

しかし

順番まで狂った

どうしてこうなった……。

いや、恐らく5の画像(縦長の画像)が、1・2の画像の合計よりも少し長くて高さが余ったから、自動計算などにすると必然的に3行目が出来上がるのだろうと予想はつきますが。
何故なら

#photos img {
  width: 100% !important;
  height: auto !important;
}

この記述を削除すれば、2行にはなるからです。
ただし、1→3→(下へ)→2→4、という順番にはなるのですが。
これでいいか、と一瞬だけ私の中に巣食うナマケモノが囁いたのですが、レスポンシブwebデザインの場合、画像の比率がおかしくなります。

もうtableタグにするしかないのかなぁ、と諦めかけたのですが、何とか解決法を見つけました。
恐らく完璧な方法とは言い難い、その場しのぎではあるのだと思いますが。
付け焼き刃はいつものことなのです。

HTML

<div id="photo">
<div>
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
<div><img src="5.jpg"></div>
</div>

CSS

#photo {
	display: table;
	width: 100%;
	margin: 0 0 30px;
	}
#photo div {
	display: table-cell;
	width: 35%;
	padding: 0 0 0 5%;
	}
#photo div:first-child {
	width: 65%;
	padding: 0;
	}
#photo div ul {
	line-height: 0;
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	column-count: 2;
	column-gap: 10px;
	width: 100%;
	}
#photo div ul li {
	padding: 0 0 10px;
	}
#photo img {
	width: 100%;
	height: auto;
	}

参考にさせていただいた記事では、画像を隙間なく並べるということで、column-gapが0になっていますが、今回私は少しだけ間隔を空けたかったので、2にしました。
尚、問題発生時は、column-gapを0にしても、画像1〜3は3行のままでした。

もう少しスマートで効果的な方法も探します。

【ハートブレーン】https://heartbrain.net

メールでのお問合せ・お見積りはコチラ