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) 在一个网格中（方框，没有标题行，每个方框中只出现 NAME 和 SCORE，点击方框时会转到 URL）。2) 随着人名被添加到 JSON 中，网格将自动调整每个框的大小以允许新名称的新框 - 网格始终使用父 div 的宽度和高度的 100%

因此，如果 JSON 中只有两个名称，则屏幕将被分成两半（水平或垂直）。如果 JSON 中有三个名称，则将有三个框（每个使用 1/3 的 div）。四个将有两行和两列，等等......实际的 JSON 将至少有 50 条记录，所以可能有 9 列和 6 行（空单元格位于右下角）但最终可能有 200 条记录（其中如果盒子会动态收缩以留出所需的空间）。

本质上，我希望有某种插件可以使用数据集创建这个网格，数据集的记录少至 10，但大至 500。

我不确定我是否非常清楚......我一直在阅读 JQuery 模板，我也遇到了这些：

我不确定哪个是最好的方法，或者是否有更简单的方法。我真的很感激你能给的任何建议。

4

1 回答 1

1

您可以使用同位素插件

配置太简单了

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