Comment obtenir une mise en page flexible d'empilement de divisions comme celle de Pinterest ?

Comment reproduire la mise en page flexible d'empilement de divisions de Pinterest

La mise en page distinctive de Pinterest est obtenue grâce à une combinaison de positionnement absolu et de JavaScript et CSS personnalisés. En tirant parti du positionnement absolu, les épingles ne sont pas contraintes par la hauteur des colonnes adjacentes, ce qui permet une mise en page flexible et réactive qui s'adapte parfaitement au redimensionnement du navigateur.

Pour reproduire cette mise en page :

• Positionnez les conteneurs d'épingles de manière absolue.
• Déterminez la largeur et la marge des colonnes (gouttière).
• Initialisez un tableau d'une longueur égale au nombre de colonnes pour représenter la hauteur de chaque colonne.

Au fur et à mesure que des épingles sont ajoutées :

• Attribuez chaque épingle à la colonne la plus courte.
• Calculez la position de gauche en multipliant le numéro de colonne par la largeur de la colonne et augmentée par la gouttière.
• Calculez la position supérieure comme la hauteur de la colonne la plus courte.
• Mettez à jour la hauteur de la colonne la plus courte du tableau.

Ceci Cette approche crée une disposition dynamique dans laquelle les broches sont empilées verticalement sans être confinées par les hauteurs des colonnes voisines. Le résultat est une conception très efficace et réactive qui s'adapte à un nombre variable de broches tout en conservant une expérience utilisateur cohérente sur différentes résolutions d'écran.

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!