QA@IT

Pinterest のように画像を隙間なく敷き詰めるには?

2955 PV

Pinterest をみていただくと、写真やそれについたコメントなど(pin と呼びます)が隙間なく敷き詰められているのが分かると思います。画像の高さを取得して、それぞれの pin の絶対座標を計算しているものと考えられます。

このような表示ができるような、JavaScript のライブラリ(jQuery のプラグイン)、あるいは CSS 等の書き方で参考になるものがあれば教えてください。

回答

MasonryというjQueryプラグインがあります。使い方は
Introductionを参考にしていただくとわかりますが、単純な設定で多数のレイアウトができるようです。

また、WookmarkというPinterstのようなサービスが公開しているWookmark jQuery Pluginというのもあります。

どちらも簡単な設定でPinterest風なデザインを実現できます。

編集 履歴 (0)
  • すばらしい! ありがとうございます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。