javascript - 在 HTML 中构建一个巨大的 div 二维网格

Question

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

把它想象成一个游戏 map ，一旦我加载了一个单元格我想保留它，但我只想延迟加载视口(viewport)之外的那些单元格。

我首先尝试使用 float 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>
...

因此解决方案可能应该考虑到这种情况。

Answer 1

这取决于你想做什么:

• 我会建议你使用

  显示: flex ； flex 包装:包装；// 在 div 的父级上

  或使用:

  显示:内联表；// 在你的 div 上

• 如果你想渐进加载，我建议你也创建 div，然后使用 javascript，定位屏幕上的最后一个 div if(neer to the edges) { load this much div }

编辑

我做了这个link to my JSFiddle展示了如何使用 Javascript 添加一个 flex-box div 并且它会准确地出现在您放置它的位置