Comment Pinterest parvient-il à obtenir une indépendance d'empilement vertical dans sa disposition dynamique en colonnes ?

Comment la disposition dynamique des colonnes de Pinterest atteint l'indépendance de l'empilement vertical

La disposition distinctive de Pinterest ajuste dynamiquement la largeur des colonnes et le placement vertical des épingles pour s'adapter au redimensionnement du navigateur. Contrairement à l'empilement traditionnel, où les hauteurs de colonnes adjacentes s'influencent mutuellement, Pinterest utilise une technique de positionnement absolu pour maintenir l'indépendance verticale.

Principes clés :

1. Positionnement absolu : Tous les conteneurs d'épingles sont positionnés de manière absolue pour permettre un contrôle précis de leur emplacement.
2. Disposition dynamique des colonnes : Le nombre de colonnes est calculé en fonction de la largeur disponible du navigateur et d'une largeur de colonne prédéterminée.
3. Suivi de la hauteur : Un tableau est utilisé pour stocker les hauteurs de chaque colonne au fur et à mesure que les broches sont ajouté.
4. Sélection de la colonne la plus courte : Les épingles sont stratégiquement placées dans la colonne la plus courte au moment de leur ajout.

Algorithme Détails :

1. Initialisation :

   • Les conteneurs à broches sont positionnés de manière absolue.
   • Largeur de colonne et gouttière marge sont déterminées.
   • Un tableau est créé pour suivre la hauteur de chaque

2. Boucle de placement des épingles :

   • Les épingles sont itérées une par une.
   • La colonne la plus courte est identifiée.
   • La position gauche de l'épingle est définie sur la largeur de la colonne et la marge multipliée par la colonne. index.
   • La position supérieure de l'épingle est définie sur la hauteur stockée dans le tableau pour la colonne la plus courte à ce moment.
   • La hauteur de la colonne la plus courte est mise à jour en ajoutant la hauteur de l'épingle.

3. Optimisé Performance :

   • Cette stratégie de disposition garantit que l'empilement vertical est indépendant des hauteurs de colonnes adjacentes, ce qui donne lieu à une disposition réactive et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!