web-dev-qa-db-ja.com

動的なサイズの画像を含むモザイクグリッドギャラリー

動的な幅と高さの画像(ユーザーが送信した画像)を含むプロジェクト、画像グリッドギャラリーの次のデザインを受け取りました。 (投稿の最後のスクリーンショット)

jQuery MasonryTympanus Automatic Image Montage および CSS-Tricks Seemless Responsive Photo Grid を試しましたが、それぞれに制限があります。

  • Jquery Masonryでは、幅と高さの両方を動的にすることができますが、ギャップが生成されます
  • 後者の2つのスクリプトは、非常に良いグリッドを生成しますが、幅または高さが静的でなければならないという問題があります

EDIT:私は遭遇しました 同位体 、これはほぼ完璧であり、何かがなければ、おそらくそれを使用することになります私のニーズを正確に修正します。したがって、私の質問はまだ同じままです...

下のスクリーンショットのような、完全に動的なモザイク(画像サイズに関して)を生成できるjavascript(できればjQuery)スクリプトはありますか?

助けてくれてありがとう


Gallery

80
Dogoku

Freewall をお勧めします。クロスブラウザでレスポンシブなjQueryプラグインであり、さまざまなタイプのグリッドレイアウトを作成できます。柔軟なレイアウト、画像レイアウト、ネストされたグリッドレイアウト、metroスタイルレイアウト、ナイスCSS3アニメーション効果を備えたpinterest ...コールバックイベントFreewallは、デスクトップ、モバイル、タブレット向けの動的なグリッドレイアウトを作成するためのオールインワンソリューションです。

ホームページとドキュメント: here も見つかりました。

63
Oleg

"Google Grid Gallery" を試すことができると思います。これは、前述のMasonryに基づいており、スタイルやビューアなどの追加機能があります。

1
askhat