javascript - 画像の柔軟なテーブル

Question

N枚の画像を表/表形式で表示する方法を探しています。
問題は、ウィンドウのサイズ変更または異なる解像度を処理し、それ自体を再配置する必要があることです。私は自分のプロジェクトで JQuery を使用できますが、可能であれば回避したほうがよいでしょう。

Answer 1

float結果を達成するためにいくつかを使用できます@media。デモで小さなフィドルを用意しました: http://jsfiddle.net/sandro_paganotti/A6n9n/1/

キーは CSS にあります。

CSS

img{ width: 33%; display: block; float: left; }

@media all and (max-width: 450px){ img{ width: 50% } }
@media all and (min-width: 550px){ img{ width: 20% } }

Answer 2

親要素のサイズが変更されると、画像は自然にリフローします。

http://codepen.io/cimmanon/pen/dwbHi

要素間の間隔を均等に分散させたい場合は、Flexbox が役立ちます。

http://codepen.io/cimmanon/pen/iHGCd

.gallery {
  margin: -5px;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .gallery {
    display: flex;
  }
}

.gallery img {
  margin: 5px;
}

<div class="gallery">
    <img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x120" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x140" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x130" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x90" />
</div>

現在のブラウザ サポート: Chrome、Opera、IE10。 http://caniuse.com/#feat=flexbox

別の方法として、CSS 列を使用することもできます (上記と同じマークアップ)。

http://jsfiddle.net/qeZaZ/

.gallery {
    -webkit-columns: 250px;
    -moz-columns: 250px;
    columns: 250px;
    text-align: center;
}

Answer 3

JQuery を使用したくないとおっしゃいましたが、頭のてっぺんから、Twitter Bootstrap を使用して見たいと思うかもしれません。これにより、流体グリッド システムを使用して箱から出してすぐにこれを行うことができます。グリッドのみを処理する簡素化されたバージョンが必要な場合は、Bootstrap のカスタム ビルドをダウンロードできると思います。

http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem