twitterのような画像一覧を作りたい

Question

開発中のサイトのためにTwitterのような画像一覧ページを作りたいと思っています。
Twitterの画像一覧

Tiwitterの画像一覧の特徴は見た限りだと
１、元画像からのアスペクト比が固定
２、余白がなく画像が敷き詰められている
４、行ごとに高さが揃っている
３、ウィンドウサイズを変えた時にリサイズされる

というようなものです。(他にも色々とあると思いますが)

デバッグツール(firebug)を使って画像要素の属性変化を監視してみたりしたのですが、コードをたどるのが難しく
どういう処理なのか全体像を把握することが出来ませんでした。

どういったcssで動いているのか、またjavascriptであれば大まかにどのような処理で実現するのか
教えてください。
よろしくお願いします。

Answer 1

想像になりますが、おそらくこんな流れで出来るんじゃないかなと思います。
*javascriptとCSSだけでは多分無理で、基本的にはサーバサイドで頑張って、随時読み込みとか拡大縮小だけクライアントサイドでやっているんじゃないでしょうか。

サーバサイドの処理の予想
0. 検索結果される
0. アクセスしてきたブラウザに相応しい横幅（合計幅）を決める
0. 一つ目の画像を取得して、アスペクト比固定のまま、で1行目の一列目として記憶
0. 二つ目の画像を「アスペクト比そのままで高さを一つ目の画像に合わせた場合の横幅が[合計幅ナイナス一つ目の画像幅]より小さいものから選ぶ
0. 三つ目の画像を、[アスペクト比そのままで高さを一つ目の画像に合わせた場合の横幅が合計幅 マイナス [一つ目＋二つ目の横幅]]とほぼ同じ画像から選ぶ
0. 以下、行ごとに処理

• これだけだと常に三つの画像になるので、行ごとに画像の数をある程度の幅でランダムに変化させればいけると思います。

Comments

[退会済みユーザー]

回答ありがとうごいました。２枚の画像選択処理の部分で、DBからサイズのちょうどいい画像をを選択して並べるとおっしゃいましたが、私の制作しているサイトはtwitterと同じ様に投稿日時順に並べたいのでそれでは難しいかと思います。

[tanat]

そもそも論として、twitterの画像検索では全ての画像が表示されている訳でも無いんじゃないでしょうか。
母数が極端に多いのでそれっぽく見えますが、数分単位で存在するような画像（例えばキーワード　猫）がちょっと下の方に行くと数時間単位で表示されているのはサイズ以外にも閲覧数やその他の基準で選別されているからでしょう。

あなたの制作しているサイトがTwitterと同様の条件をそろえられるなら、上記回答の検索条件に「一つ前の画像より古いもの」という条件を加えれば可能だと思いますよ。

通常はそれは無理なので、全く同じことをすることは諦めて
・投稿するタイミングで画像アスペクト比をある程度固定する
・サムネイルとして表示するタイミングでトリミングする
・サムネイルとして表示するタイミングでアスペクト比を変える
・それらの複合
するしかないです。