Comment Pinterest obtient-il sa mise en page réactive avec l'empilement de divisions ?

Comment l'ingénieuse mise en page Div Stacking de Pinterest s'adapte à différentes tailles de navigateur

La mise en page visuelle captivante de Pinterest a joué un rôle important dans son succès en tant que réseau social plateforme médiatique. Un aspect clé de cette disposition est la possibilité pour les colonnes d'ajuster leur nombre et de s'empiler verticalement, quelle que soit la hauteur des colonnes adjacentes.

Dans les coulisses : jQuery et CSS personnalisés

Le code du site Web révèle que cette disposition est réalisée en utilisant un positionnement div absolu. Cependant, comme l'a déclaré un co-fondateur de Quora, Pinterest utilise jQuery et CSS personnalisés pour contrôler le comportement de la mise en page.

Le plan de mise en page

Le script jQuery, ingénieusement conçu, repose sur les principes suivants :

1. Positionnement absolu : Chaque conteneur d'épingles est positionné de manière absolue, permettant un contrôle précis du placement.
2. Colonne Calcul de la largeur : Le script calcule la largeur de chaque colonne en fonction de la taille du conteneur parent et du nombre de colonnes souhaité.
3. Marge entre les colonnes : Une valeur de gouttière est définie , représentant la marge entre les colonnes adjacentes.
4. Tableau de hauteur : Un tableau est créé pour stocker la hauteur de chaque colonne, qui sera utilisée pour déterminer l'empilement vertical.
5. Parcourir les épingles : Au fur et à mesure que de nouvelles épingles sont ajoutées, le script parcourt chacune d'elles, en la plaçant dans la colonne la plus courte.
6. Définition des coordonnées : Position gauche de chaque épingle est défini sur son index de colonne respectif multiplié par la largeur de la colonne plus la gouttière. Sa position supérieure correspond à la hauteur de la colonne la plus courte à cette instance.
7. Réglage de la hauteur : Après avoir placé la broche, sa hauteur est ajoutée à la hauteur de la colonne choisie dans le tableau.

Avantages de la mise en page personnalisée

Cette mise en page personnalisée offre plusieurs avantages :

• Responsive : La mise en page s'ajuste automatiquement en fonction des changements de taille du navigateur, offrant ainsi une expérience visuelle optimale.
• Empilage vertical : Indépendamment de la hauteur des colonnes adjacentes, les épingles s'empilent verticalement, créant un effet de grille.
• Efficacité : Le script est très efficace, réduisant le temps nécessaire pour disposer plusieurs épingles sur une page.

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!