Shutterstockの様な横方向のタイルレイアウトのギャラリーページを作りたい

Question

実現したいこと

Shutterstock のような、横方向のタイルレイアウトのギャラリーを作りたいと考えています。

Shutterstock ではどういったルールで整列しているかイマイチわかっていないのですが、
1 行に対して 2 カラム〜 4 カラムで、行の横幅いっぱいまで伸縮し、カラムの高さがきれいに揃うように自動調整される様です。

似たようなものに Masonry の JS プラグインがありますが、Masonry ではカラムの整列が垂直方向です。
カラムの整列を水平方向にしたいのと、行の横幅いっぱいまで伸縮させたいと考えております。

CSS および JS で実現する方法、難しければこれに近い方法やヒントになりそうな記事など、ご教示下さいますとありがたいです。
※ IE は切り捨てています。

---

簡単にですが、対象の HTML も記載しておきます。

<div class="container">
  <!-- 画像のサイズは決まっておらず、まちまちです。横長だったり縦長だったりします。 -->
  <a class="item"><img src="画像1のパス" alt=""></a>
  <a class="item"><img src="画像2のパス" alt=""></a>
  <a class="item"><img src="画像3のパス" alt=""></a>
  <a class="item"><img src="画像4のパス" alt=""></a>
  <a class="item"><img src="画像5のパス" alt=""></a>
  <a class="item"><img src="画像6のパス" alt=""></a>
  <a class="item"><img src="画像7のパス" alt=""></a>
  <a class="item"><img src="画像8のパス" alt=""></a>
</div>

Comments

[Lhankor_Mhy]

ご提示のページを拝見したところ、サムネイル画像の高さは全て280pxで揃っているようでした。
おそらく、サーバ側で画像の配置がしやすいようにサムネイル画像を生成しているのだと思います。

[evir0825]

コメントありがとうございます。
なるほどですね、ただ、元の画像の高さが揃っていたとしてもコンテナの幅に対して綺麗に整列するようにカラムがリサイズされる状態を再現する必要がありますね。
考えてみます。

[Lhankor_Mhy]

画像の高さが同じなら、おそらくフレックスレイアウトで再現可能なのではないかな、と思います。試してみてはいませんが。

[evir0825]

すみません、画像の高さが同じであることは、レイアウトの再現に必要な事項であるのでしょうか？

CSS で高さを揃えて、Flex によるレイアウトを行うことは可能ですが、下記のように右に余白が出来てしまいます。
https://codepen.io/evir0825/pen/ExgGVra
↑こちらで入れているアタリ画像のサイズはまばらにしていますが、画像の高さを統一しても状況は変わりませんでした。

余白を埋めるように伸縮させるとなると、アスペクト比を維持する場合、元の高さは幅に応じて伸縮しなければならず、この余白を埋めるには、コンテナの幅に合わせてカラムの幅を JS で伸ばす必要があるのかな、と考えています。ちょっと難しそうですが。

[Lhankor_Mhy]

やってみないと何とも言えませんが、できるような気がしています。

ただ、解決につながるのであれば取り組んでみるかもしれませんが、そうでないのであれば試してみる気は起きないです。ご質問は画像の高さがそろっていないことが条件なのですよね？

[evir0825]

いえ、画像の高さをサーバ側で揃えるのはすぐ出来るとバックエンドから回答がありましたので、ご提示頂いた方法は寧ろ解決そのものになると思っております。

もともとは複雑な JS を組む必要があるだろうと思っていたので、画像ファイルの高さの統一と Flex レイアウトで解決できるのであれば、なおのことありがたいです。
Lhankor_Mhy 様のご負担にならない程度で、ご助力いただけますと幸いです。

Answer 1

こういった形ではいかがでしょうか。
各行の高さは一致しませんが、Shutterstock でもそうなっていました。

サンプルです。

div{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

img{
  flex-grow: 1;
}

追記

これではどうでしょうか。ラッピングすることでバグを回避しています。Chrome と Firefox で動作確認済み。
動的にCSSを付与するスクリプトも書きました。

サンプル

<section>
    <div><img src="http://placehold.jp/24/cc9999/993333/300x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/400x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/150x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/300x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/150x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/400x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/300x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/150x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/150x200.png?text=" alt=""></div>
    <div><img src="http://placehold.jp/24/cc9999/993333/300x200.png?text=" alt=""></div>
</section>

document.querySelectorAll('div').forEach( wrapper => 
    wrapper.querySelector('img').addEventListener('load', e =>
      wrapper.style['flex-grow'] = e.target.naturalWidth
    )
);

section{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items:flex-start;
}
div{
  flex: 1 0 auto;
}
img{
  width: 100%;
}

ただ、ラッパー要素の高さが画像より少しだけ大きくなるのがなぜなのか、理解できないでいます……

Comments

[evir0825]

回答をありがとうございます。
非常に近いのですが、ご提示いただいたものですと元の画像のアスペクト比が維持出来ていない状態になってしまう様です。
頂いたサンプルにてブラウザの横幅を伸縮させると、画像の高さは一律ですが幅が変わってしまっている様に見受けられます。

アス比は固定したいと考えているのですが、 Flex で高さを固定かつ幅のみコンテナに応じて伸縮されている状態なので、アス比固定もとなると再現かなり難しいですよね。

[Lhankor_Mhy]

たしかにそうですね。

では、これではどうですか？
https://jsfiddle.net/Lhankor_Mhy/e4kxjqs6/1/

flex-grow を指定しなきゃいけないので、実装の際にはここをJavaScriptで動的に指定することになると思いますが。

[evir0825]

度々ありがとうございます。
サンプルの JSFiddle を拝見したのですが、アス比の件は解消されていない様でした。
私の PC が横幅 1440px と小さいからかもしれませんが。

只今、手持ちの環境で確認ができず恐縮ですが、例えば大きめのモニターで見るとアス比は維持されているのでしょうか？

[Lhankor_Mhy]

そうでしたか。
当方ではアスペクト比がずれていないので、環境の問題かもしれませんね。

[Lhankor_Mhy]

Firefoxで確認していたのでChromeで見てみたところ、たしかにアスペクト比がずれるようです。
どっちかのブラウザのバグでしょうね。これはやっかい……

[evir0825]

Chrome で見ておりました、確かに Firefox ですと維持された状態になりますね。
とは言え私の方でも、頂いたものをベースに調整可能なものなのか少し試してみようと思います。
ありがとうございます。

[Lhankor_Mhy]

とりあえず、バグを回避したコードを追記しました。どうでしょうか。

[Lhankor_Mhy]

ん？　あれ、サンプルがおかしいですね。もう少し検討してみます。

[Lhankor_Mhy]

あー、なるほど。
naturalWidth が画像読み込みに先行しているせいですね。サイズが取得できていない。
画像のロードイベントを拾うしかないか……

[Lhankor_Mhy]

追記変更しました。

ディベロッパーツールでキャッシュ無効にしてテストしましたが、動作を確認できたので大丈夫ではないかな、と思います。

[evir0825]

ありがとうございます、Chrome・Firefox で見ましたが、完璧です。
Safari については gap が効いてなかったのですが、レイアウトは理想どおりになっているので、Safari での gap の問題については自分の方で代替策を考えます。

> ラッパー要素の高さが画像より少しだけ大きくなる
についてはインライン要素のベースラインが原因の様でしたので、
`img {display: block;}` を追記してうまくいきました。

そろそろ代替案を提示しないと、と思っていたところでしたので、非常に助かりました。
度重なる検証など最後までお付き合い頂き、とても感謝しております。

ありがとうございました。

[Lhankor_Mhy]

> インライン要素のベースラインが原因の様

なるほど、そうなのですね。それは気が付きませんでした。
こちらも勉強になるご質問でした、ありがとうございました。