ダイナミックサイズの画像を含むモザイクグリッドギャラリー[クローズ]


80

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

私が試してみましたjQueryの石造Tympanus自動イメージモンタージュCSS-コツシームレス応答フォトグリッドを、それぞれが自分の限界を持っています。

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

編集:私はIsotopeに出くわしました。これはほぼ完璧で、私のニーズを正確に修正するものがない限り、おそらくそれを使用することになります。したがって、私の質問はまだ同じです...

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

助けてくれてありがとう


ギャラリー


それは私が必要なもののように見えますありがとう。これを回答として追加していただければ、適切にクレジットを付与して、質問に回答済みのマークを付けることができますか?
ドゴク2012

@Dogokuアイソトープで高さと幅を同時に動的にする方法を教えてください。
マークバイタル

警告:Tympanus自動画像モンタージュリンクはバグのあるゴミです。
shipshape 2013年

unitegalleryを使用できます。それは応答し、ライトボックスなどのリンク、アイコン、のように利用できるさまざまなオプションがある
RN Kushwaha

上の画像と同じ出力が必要です。画像のサイズは異なりますが、最終的にはギャップが必要ありません。すべてが画像であるため、Freewallメトロスタイルのグリッドは機能していません。助けてください!
monisha 2017

回答:


64

私は提案しFreewallます。これは、クロスブラウザーでレスポンシブなjQueryプラグインであり、柔軟なレイアウト、画像レイアウト、ネストされたグリッドレイアウト、メトロスタイルのレイアウト、ピンタレストのようなレイアウトなど、さまざまな種類のグリッドレイアウトを作成できます。CSS3アニメーション効果とコールバックイベントがあります。Freewallは、デスクトップ、モバイル、タブレット向けの動的グリッドレイアウトを作成するためのオールインワンソリューションです。

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


12
この勉強:かもしれ役に立つことcrispymtn.com/stories/...
mayankcpdixit

@mayankcpdixitこれは非常に役に立ちます。ありがとう
zavr 2014

1
tnx @ zavr私は自分で何かを作りました。github.com/mayankcpdixit/grid-no-white
mayankcpdixit

@mayankcpdixit、かっこいい、よくやった。jQueryプラグインとして自分でも作成しました。
zavr 2014

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.