Question

我想建立一个动态网站，显示一种链接列表。我存储在json文件中的链接信息如下所示：

{
"name" : "Example 1",
"color" : "#9c88ff",
"serversystems": [
  {
    "name" : "example 1",
    "info" : "example text",
    "logo" : "logo.png",
    "instances" : [
      {
        "name" : "subexample 1",
        "link" : "#",
        "info" : "example text"
      },
      {
        "name" : "subexample 2",
        "link" : "#",
        "info" : "example text"
      },
      {
        "name" : "subexample 3",
        "link" : "#",
        "info" : "example text"
      },
      {
        "name" : "subexample 4",
        "link" : "#",
        "info" : "example text"
      }
    ]
  },
  {
    "name" : "example 2",
    "info" : "example text",
    "instances" : [
      {
        "name" : "subexample 1",
        "link" : "#",
        "info" : "example text"
      }
    ]
  },
  {
    "name" : "example 3",
    "info" : "example text",
    "logo" : "logo.png",
    "instances" : [
      {
        "name" : "subexample 1",
        "link" : "#",
        "info" : "example text"
      }
    ]
  }
]}

一个服务器类型可以包含几个服务器系统，而它们又可以包含几个服务器实例。

我的JavaScript从json文件中获取所有数据，创建html元素并将其附加到包装div。

要将这些代码块放置在网站上，我的包装器div跨一个CSS网格：

#wrapper {
  grid-column: 2;
  grid-row: 2;

  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}

这个想法是让它看起来像这样： what one servertype "block" should look like

我似乎无法弄清楚的事情是：随着系统和实例数量的变化，我网站上这些块的大小也随之变化。如何使用JavaScript获取最终html块的高度（在附加所有内容之后），以便可以使其跨越网格上一定数量的列和行？

在网格数组上动态跨越div

0 个答案: