Construire une énorme grille 2D de divs en HTML

Question

Je veux construire d'énormes cellules divs (10000 * 10000) par exemple. Je n'ai pas besoin de montrer l'ensemble du fil à la fois, montrer plutôt une petite fenêtre (10 * 10), et utiliser la flèche pour charger paresseusement de nouvelles cellules en vue que l'utilisateur navigue à travers ce gird. Pensez-y comme une carte de jeu, une fois que je charge une cellule, je veux la garder, mais je veux seulement paresseux charger ces cellules en dehors du port de vue. J'ai d'abord essayé d'utiliser des divs flottants, mais il s'est rapidement avéré très difficile de maintenir l'ordre des divs horizontalement et verticalement lorsque l'utilisateur navigue aléatoirement dans les deux sens. Je commençais à penser que l'utilisation de propriétés supérieures gauche fixes pour chaque cellule serait un meilleur choix pour garder les cellules chargées et les espaces vides des cellules non chargées au bon endroit.

Je sais que vous dire que c'est une question subjective et sans exemple de code, mais je crois que c'est une bonne question, donc ici, je réaffirme qu'il:

Est-il préférable d'utiliser « float: left » div ou "position: absolute" pour dessiner une énorme grille div deux dimensions?

Modifier

je l'ai trouvé plus facile de préserver les lacunes ou les espaces entre les cellules précédemment chargées et non adjacentes, par exemple, je pourrais finir avec un cas comme celui-ci:

... 
<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> 
... 

Alors solution devrait probablement prenez ce scénario en considération.

Answer 1

Il dépend de ce que vous voulez faire:

• Je vous suggère d'utiliser

  display: flex; flex-wrap: wrap; // sur le parent du divs

  ou à utiliser:

  display: inline-table; // sur vos divs

• si vous voulez charger progressive je vous suggère également de vous créer divs puis avec javascript, cibler les derniers divs sur l'écran if(neer to the edges) { load this much divs }

Modifier

J'ai fait cette link to my JSFiddle montrant comment vous pouvez utiliser Javascript pour ajouter un div flex-box et il va exactement où vous le placez