0

各子ノードを親ノードの下に配置し、他の子ノードの隣に上揃えで画像をツリー階層に配置したいと考えています。各ノードは、任意の数の子ノードを許可する必要があります。理想的には、次のようなものです。

ボックスのグリッド

これは、低い画像が高い画像の端を越えることを可能にするメイソンリーやアイソトープと同じではないことに注意してください。ただし、任意の数の画像の自動サイズ変更は確かに望ましいことです。

最初の試みとして、私はこの CSS から始めました。

img.first-row {
    max-width: 100%;
    vertical-align: top;
}
img.second-row {
    max-width: 24%;
    vertical-align: top;
}
img.third-row {
    max-width: 8%;
    vertical-align: top;
}

これは、1 行目に 1 つの画像、2 行目に 4 つ、3 行目に 3 つの画像がある場合にのみ機能します。さらに、3 行目は実際には 2 行目の 1 番目の写真の下に留まらず、写真が 3 つ以上ない場合はそのように見えます。

したがって、複数の部分があります。

  1. 任意のコンテンツを保持できるツリー レイアウトの再帰的なネスト。

  2. レイアウトに合わせて画像を自動リサイズ。

  3. HTML ドキュメントでこれを実現する方法。Javascript、CSS、jQuery など、特にこだわりはありません。ツリーのレイアウトが維持されている限り、画像が特にぴったりと収まる必要もありません。

4

1 に答える 1

0

あなたが求めているのは、ある種の修正されたツリー マップ視覚化アルゴリズムのように聞こえます。Isotope では、そのような階層的なレイアウトを強制することはできません。適応できるjQueryアプローチについては、githubでこちらをご覧ください。おそらく、これらの JavaScriptライブラリは便利です。このツールキットでは JavaとFlash を使用しています。または、インタラクティブな Java アプレットとしてインターネット上に展開できるこれを検討してください。

于 2012-08-18T21:14:43.940 に答える