0

次のような単純な JSON があります。

[{"NAME":"Bill","Score":25,"URL":"Bill.html"},{"NAME":"Jane","Score":16,"URL":"Jane.html "},{"NAME":"Xavier","Score":5,"URL":"Xavier.html"},{"NAME":"Hector","Score":32,"URL":"Hector .html"}]

実際の JSON にはさらに多くのレコードがあります。次のように、すべてのレコードをページに表示したいと思います。

1) グリッド (ボックス、タイトル行なし、各ボックスに名前とスコアのみが表示され、ボックスをクリックすると URL に移動します)。2) 人の名前が JSON に追加されると、グリッドは自動的に各ボックスのサイズを変更して、新しい名前用の新しいボックスを許可します。グリッドは常に、親 div の幅と高さの 100% を使用します。

そのため、JSON に名前が 2 つしかない場合、画面は (水平または垂直に) 半分に分割されます。JSON に 3 つの名前がある場合、3 つのボックス (それぞれが div の 1/3 を使用) になります。4 には 2 行と 2 列などがあります... 実際の JSON には少なくとも 50 レコードが含まれるため、おそらく 9 列と 6 行 (空のセルは右下に表示されます) になりますが、最終的に 200 レコードになる可能性があります (その中の必要なスペースを確保するためにボックスが動的に縮小される場合)。

基本的に、10 レコードから 500 レコードまでのデータセットでこのグリッドを作成できる何らかのプラグインを望んでいます。

私が非常に明確であるかどうかはわかりません...私はJQueryテンプレートを読んでいますが、これらにも出くわしました:

どちらが最善のアプローチなのか、さらに簡単なアプローチがあるのか​​ どうかはわかりません。アドバイスをいただければ幸いです。

4

1 に答える 1

1

Isotopeプラグインを使用できます

設定が簡単すぎる

$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});
于 2013-01-03T20:22:57.370 に答える