从JSON数据创建网格的最佳方法，该方法会根据条目数动态调整大小 [英] Best way to create grid from JSON data which dynamically resizes based on number of entries

问题描述

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

I have a simple JSON like so:

[{"NAME":"Bill"，分数":25，"URL":"Bill.html"}，{"NAME":"Jane"，分数":16，"URL":"Jane.html}，{" NAME:" Xavier，"分数:5，" URL:" Xavier.html}，{" NAME:" Hector，"分数:32，" URL":"Hector.html"}]

[{"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具有更多记录.我想将所有记录显示在这样的页面上:

The actual JSON has many more records. I would like to display all the records on a page like so:

1)在网格中(框，没有标题行，只有名称和分数显示在每个框中，并且单击该框会将您带到URL). 2)在将人名添加到JSON时，网格将自动调整每个框的大小，以允许新框用于新名称-网格始终使用父div宽度和高度的100％

1) In a grid (boxes, no title rows, only the NAME and SCORE appearing in each box and when clicking on the box takes you to the URL). 2) As people's names are added to the JSON, the grid will automatically resize each box to allow for new boxes for the new names - the grid always uses up 100% of the width and height of the parent div

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

So, if there were only two names in the JSON, the screen would be split in half (horizontally or vertically). If there were three names in the JSON, there would be three boxes (each using 1/3 of the div). Four would have two rows and two columns, etc... The actual JSON will have at least 50 records, so maybe 9 columns and 6 rows (empty cells would be at the bottom right) but could end up having 200 records (in which case the boxes would dynamically shrink to allow for needed space).

本质上，我希望找到一种插件，该插件可以使用包含少至10条记录但最多500条记录的数据集来创建此网格.

Essentially I'm hoping for some kind of plugin which could create this grid with a dataset with as few records as 10, but as large as 500.

我不确定自己是否很清楚...我一直在阅读JQuery模板，我也遇到了这些问题:

I'm not sure if I'm being very clear...I've been reading up on JQuery templates, I also ran across these:

• http://www.zachhunter.com/2010 /04/json-objects-to-html-table
• 使用JSON数据创建表的jQuery函数
• http://mvc.syncfusion.com/demos/ui/grid /Editing/JSONCRUD
• http://www.9lessons.info/2009 /10/json-jquery-ajax-php.html

• 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

我不确定哪种方法最好，或者是否有更简单的方法.我真的很感谢您可以提供的任何建议.

I'm not sure which is the best approach, or if there is an even easier approach. I'd really appreciate any advice you can give.

推荐答案

您可以使用同位素插件

配置太简单

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

这篇关于从JSON数据创建网格的最佳方法，该方法会根据条目数动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！