Javascript 在HTML中构建巨大的2D div网格

例如，我想构建一个巨大的divs网格（10000*10000）单元。我不需要一次显示整个网格，而是显示一个小窗口（10*10），并在用户浏览该网格时使用箭头将新单元格延迟加载到视图中

把它想象成一个游戏地图，一旦我加载一个单元格，我就想保留它，但我只想懒洋洋地加载视图端口之外的单元格

我第一次尝试使用浮动div，但很快就证明，当用户在两个方向上随机导航时，很难保持div的水平和垂直顺序

我开始想，也许对每个单元格使用固定的左上属性将是一个更好的选择，以使加载的单元格和未加载单元格的间隙保持在正确的位置

我知道你会说这是一个主观问题，没有代码示例，但我相信这是一个好问题，所以我在这里重新陈述：

使用“float:left”div或“position:absolute”绘制一个巨大的二维div网格更好吗

编辑

我发现保留以前加载的单元格和非相邻单元格之间的间隙或空格更容易，例如，我可能会遇到这样的情况：

...
<div id="cell-9"></div>
<div id="cell-10"></div>
<!-- preserved space or place holder for cells 11-15 -->
<div id="cell-16"></div>
<div id="cell-17"></div>
...

。。。
...

---

所以解决方案可能应该考虑到这个场景。

它取决于您想要做什么：

• 我建议你使用

  显示：flex；
  柔性包装：包装//
  关于div的父级
  
  或使用：
  
  显示：内联表//
  在你的沙发上
  

• 如果您想要渐进加载，我建议您也创建div，然后使用javascript，将屏幕上的最后一个div作为目标

  if（neer to the edges）{加载这么多div}

编辑

---

我做了这个演示，展示了如何使用Javascript添加一个

flex框

div，它精确地放在你放置它的地方

我以前从未使用过flex。它是否为卸载的单元格保留空间？请检查我在上述问题中的编辑以了解更多详细信息。我检查了您的示例。在UI中保留的空间实际上应该是空白的，这意味着它应该是一个宽度为五个单元格的间隙。在您的示例中，cell-10和cell-16之间没有空格。您可以添加一个div，其宽度为另一个（占位符）的5倍，并使用JavaScript逐步减小其大小。我举的这个例子，只是告诉你如何使用flex box来解决你的问题。谢谢你，我现在明白了。但在这种情况下，我找不到flex比float有什么优势。请查看。我已经用代码更新了我的答案，或者你可以点击这个链接