11

私は基本的にそれを達成するためにすべてのヒント/ヒント/アドバイスを試しましたが、それでも、Isotopeを使用しているときにこれらの空の醜いスペースを手に入れました。

これが私が経験している問題を示すデモです。

これらの空白が表示されますか?下の項目があるときはいつでもこの空白を埋めるようにするjqueryコードはありますか?

すべてのアイテムに単一の幅を使用する場合、問題はまったく表示されません。アイテムごとに異なる幅を使用すると表示され始めます。アイソトープは、空のギャップを探して、適切なサイズのアイテムが利用できる場合はそれらを埋めるほどインテリジェントではありません。

何か助けはありますか?私は本当に立ち往生しています!

この問題の解決に役立つ可能性のある補足的な質問:

要素を強制的にフロートさせるjQueryプラグインはありますか?フィッティングアイテムを強制的に空いた場所を埋めることができると思います!

4

2 に答える 2

23

最新の編集によると、同位体のパッカリーレイアウトモードがあります。元の回答とその後の追加は以下に残ります。


この機能は他の人からも要求されています:

要するに、現在の答えは、ギャップを完全に回避したい場合は、次のようにする必要があるということのようです。

  1. 固定幅を選択してください
  2. 選択した幅で隙間が生じないように、要素をサイズに合わせて慎重に配置します。

もちろん、アイテムのサイズと場所が静的でない場合、または幅を設定できない場合、それがうまく機能することは想像できません。

固定幅のコンテナのギャップを埋めるために要素を手動で配置してもうまくいかない場合は、最初のリンクに+1を付けてチャイムを鳴らすことをお勧めします。


E(4.22.2013):最近の活動に気づいたので、すぐに更新します。これはすべて、最初のリンクである組積造の問題#141で利用できます。

PerfectMasonryは、Isotopeのレイアウト拡張機能です。「perfectMasonry」layoutModeとギャップのないレイアウトを提供するオプションを提供することでギャップを埋めます。

Nestedは、ギャップのないレイアウトの代替ライブラリです。

Packeryは、ギャップのないレイアウトなどをサポートするIsotopeの作成者によるライブラリです。

私はこれらのどれも(まだ)個人的に使用していません。

最後に、Packeryのリリースに関するブログ投稿で、DeSandroは、「最終的には、Packeryで開発されたこのソリューションやその他のソリューションをMasonryとIsotopeに移植したいと考えています」と述べています。

私はそれが信じられないほどすぐに起こることを期待していません。この編集の時点で、Packeryは7日間しかリリースされていません。

E2(6.13.2014):

DeSandroは、アイソトープのパッカリーレイアウトモードをリリースしました。

于 2012-08-24T23:00:36.500 に答える
1

なぜこれがこの重複スレッドにあるのかを説明しようとしました。このスレッドには、遊ぶためのフィドルも含まれています。必ずしも固定幅である必要はありません。元のデモンストレーションのように小さなアイテムが多数ある場合、ぴったりとフィットする可能性は高くなりますが、保証されません。jQuery Tilesなどの代替プラグインを使用するか、Wookmarksを適応させることができます。

あなたのケースで実装することは簡単ではありません、何が関係しているかを見て、それに関連するいくつかの画像を検索してください、あなたは関係している複雑さを見るでしょう。

于 2012-08-25T15:41:15.833 に答える