tumblrとgoogle +のスタック画像はどのようにパズルのようですか？

Question

私は画像のギャラリーを作りたいと思っていますし、Googleやtumblrのような画像を積み重ねる方法を知りたいと思っています。

あなたは彼らがすべての列に積層されているtumblrののアーカイブのページで見たとき、私はそれで意味がある：http://the-overlook-hotel.tumblr.com/archive

私は彼らがまた列にわたって重なるようにしたいしかし、私はこのテーマで行わ見てきましたtessellateと呼ばれるtumblr：http://www.tumblr.com/theme/30524

heresそれの例です。

GoogleがGoogle +の写真ページに似た何かをする（申し訳ありませんが私はより良い例を見つけることができませんでした）http://idotessellate.tumblr.com/ ：https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

はこれを行い、画像または埋め込まれたビデオが2列にわたって行くのセクションを参照してくださいスクロールを保ちますタイプのものは名前がありますか？どのように達成することができますか、またはこれらの結果を得るためにどこで見ることができますか

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

Answer 1

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

Googleは画像をあらかじめ注文しているので、float：leftを使ってうまくフィットするように見えます。最初のイメージを除いて、イメージは行順に並べられています。 broswerのサイズを変更すると、画像が拡大または縮小されてレイアウトが維持されます。

これを自分で行うには、jQuery Masonry pluginをご覧ください。