Comment Pinterest obtient-il sa disposition en grille dynamique avec un positionnement absolu ?

Mise en page Absolute Div Stacking : dévoiler le secret de Pinterest

La disposition en grille captivante de Pinterest s'est inspirée de nombreux développeurs, mais en reproduisant son ajustement transparent des colonnes et l'empilement vertical pose un défi. Voici un aperçu approfondi de la façon dont cela se fait, suite à une révélation Quora de l'un des co-fondateurs de Pinterest :

Positionnement absolu et script personnalisé

Chaque conteneur div dans la mise en page de Pinterest est positionné de manière absolue, permettant un contrôle précis de son placement. La clé réside dans un script jQuery et CSS personnalisé qui orchestre le comportement dynamique de la mise en page.

Calcul des dimensions des colonnes et des gouttières

Avant de positionner les divs, le script détermine la colonne la largeur et la marge ou « gouttière » entre les colonnes. Ces valeurs influencent le nombre de colonnes pouvant tenir sur la page.

Suivi de la hauteur avec des tableaux de colonnes

Un tableau est créé pour stocker les hauteurs de chaque colonne. Lors du calcul de la position « supérieure » d'un nouveau div, le script identifie la colonne la plus courte (celle avec la plus petite valeur de hauteur dans le tableau) et y place le div.

Positionnement dynamique et réglage de la hauteur

La position "gauche" est calculée en fonction du numéro de colonne et de la largeur de la colonne plus la marge. La position « supérieure » est déterminée par la hauteur de la colonne la plus courte à ce moment-là. Au fur et à mesure que des div sont ajoutés, le script met à jour la valeur de hauteur de la colonne correspondante pour refléter la nouvelle hauteur.

Léger et réactif

Cette approche aboutit à une mise en page très réactive. qui s'adapte efficacement au redimensionnement du navigateur et aux différentes tailles d'écran. Le script, malgré sa complexité, est léger et traite les mises en page avec de nombreuses épingles en moins de 10 millisecondes.

En comprenant l'interaction complexe du positionnement absolu et des scripts personnalisés, les développeurs peuvent créer des mises en page dynamiques et flexibles qui ressemblent visuellement à celles de Pinterest. grille attrayante.

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!