jquery - 画像タイルを使用した Web サイトの設計

Question

navのほかに、画像のセクションがタイルのようにページを埋めるデザインを実装しようとしています。ただし、画像はアルバム カバーなので、通常は (例外を除いて) 幅と高さは同じです。

これに関する難しい部分は、画像が並んでいるセクションがユーザーの PC 画面サイズに合わせて調整されるように、全画面 (幅方向) でこれを実行しようとしていることです。現時点では、HTML は次のようになります。

<section id="wrapper">
    <section id="cont">
        <section class="row1">
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
        </section>
    </section>
</section>

したがって、それぞれdivが与えられwidth: 20%、1 つのセクションが 5 秒でページ全体に広がりますdiv。画像はwidth: 100%であるため、それぞれがdiv完全に塗りつぶされています。次に、もう 1 つ追加sectionして 2 行目を作成します。

私の質問は、これを正しく実装し、最小限のコーディングで (ユーザー エクスペリエンスのために) どうすればよいかということです。jQuery Masonry を使用してみましたが、私が望むものとは少し異なります。助言がありますか？

---

※後ほど追記

また、これらのタイルの一部にはテキストが含まれることを付け加えたいと思いますが、div のサイズは異なる場合があります。つまり、画像と同じですが、長さが長くなります。また、JS などを使用して section#cont に高さを設定できるようにして、その下にフッターを配置できるようにしたいと考えています。

これが現在のデザインです。一番遠いアルバム カバーを、テキストを含む色付きの異なるサイズの div に置き換えることができるようにしたいのですが、その後の div はぴったり収まります。

[画像] http://automaton-hacks.tumblr.com/image/44124223193

Answer 1

あなたはこれを探しているのかもしれません：ここでフィドルで

css：

section{
    width:100%; 
    clear:both;
}

div{
   width:20%; 
   float:left; 
   background:#e1e1e1;
}

img{
  width:100%; 
  height:100%;
}

html：

<section class="row1">
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
      <p>This is content for img. This is content for img. This is content for img. This is content for img. This is content for img. This is content for img. </p>
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
</section>

Answer 2

あなたが探しているのはグリッドシステムだと思います。http://960.gsをお勧めします。

また、固定数の列の代わりにパーセンテージで動作するhttp://unsemantic.com/を試すこともできます。

これらは、ページ全体を等しい列に分割することによって機能します。css メディア クエリを使用すると、ウィンドウのサイズに応じて、使用する列の数を選択できます。したがって、これを行うことで、行ごとに表示される画像の数を自動的に設定できます。

これらすべてを、テーブルの shmable なしで行います。それを調べてください、あなたはそれが好きかもしれません。

Answer 3

HTML テーブルを使用してみてください。