4

画像のギャラリーを作成しようとしていますが、Google や tumblr のように画像をスタックする方法を知りたいと思っています。

つまり、tumblr のアーカイブ ページを見ると、それらはすべて列に積み上げられているということです: http://the-overlook-hotel.tumblr.com/archive

ただし、それらを列全体でオーバーラップさせたいのですが、テッセレートと呼ばれるtumblrのテーマでこれが行われているのを見てきました: http://www.tumblr.com/theme/30524

その例を示します。スクロールし続けると、画像または埋め込みビデオが 2 つの列にまたがるセクションが表示されます: http://idotessellate.tumblr.com/ (申し訳ありませんが、より良い例が見つかりませんでした)

Google は Google+ の写真ページで同様のことを行います: https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

この種のものに名前はありますか？どうすればそれを達成できますか、またはこれらの結果を得るためにどこを見ることができますか

あたかもお互いに座っているかのようです。

4

1 に答える 1

9

Tumbler は、Javascript を使用して画像のレイアウトを計算しているようです。ページが読み込まれると、各画像の絶対位置が設定されます。ウィンドウのサイズを変更すると、各画像の位置が再計算されます。

float: left を使用して画像がうまく収まるように、Google が画像を事前注文したようです。最初の画像を除いて、画像は行ごとに並べられていることに気付くでしょう。ブラウザのサイズを変更すると、レイアウトを維持するために画像が拡大または縮小されます。

これを自分で行うには、jQuery Masonry プラグインをご覧ください。

于 2012-04-11T02:40:13.343 に答える