最佳方式

Question

我有一个简单的JSON像这样：

[{“NAME”：“比尔”，“得分”：25，” URL “：” Bill.html “}，{” Name “：” 简”， “分数”：16， “URL”： “Jane.html”}，{ “Name”： “泽维尔”， “分数”：5 ， “URL”： “Xavier.html”}，{ “NAME”： “赫”， “得分”：32， “URL”： “Hector.html”}]

实际JSON有更多的记录。我想在页面上显示所有记录，如下所示：

1）在网格中（框，没有标题行，只有名称和SCORE出现在每个框中，当点击框会将您带到URL ）。 2）随着人们的姓名被添加到JSON中，网格会自动调整每个框的大小以允许为新名称添加新框 - 网格始终占用父div的宽度和高度的100％

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

基本上我希望某种插件可能用尽可能少的记录为10的数据集建立这个网，但大到500

我不知道如果我是非常清晰......我一直在jQuery的模板读了起来，我也跑过这些：

• http://www.zachhunter.com/2010/04/json-objects-to-html-table
• jQuery function to create table using JSON data
• http://mvc.syncfusion.com/demos/ui/grid/Editing/JSONCRUD
• http://www.9lessons.info/2009/10/json-jquery-ajax-php.html

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

Answer 1

可以使用Isotope plugin

实在是太简单配置

$('#container').isotope({ 
    // options 
    itemSelector : '.item', 
    layoutMode : 'fitRows' 
});