Comment reproduire la mise en page Responsive Div Stacking de Pinterest ?

Réplication de la mise en page Absolute Div Stacking de Pinterest

La mise en page div unique de Pinterest présente un défi pour les programmeurs cherchant à reproduire ses fonctionnalités. Le jQuery et le CSS personnalisés utilisés pour ajuster dynamiquement la mise en page en fonction du redimensionnement du navigateur et empêcher la dépendance à l'empilement vertical laissent beaucoup se demander comment obtenir des résultats similaires.

Réponse :

Le Le principe de base de la mise en page de Pinterest consiste à positionner de manière absolue les conteneurs d'épingles, à déterminer la largeur des colonnes et la taille des gouttières et à utiliser un tableau pour suivre la hauteur de chacun.

1. Positionnement des conteneurs d'épingles :

Chaque conteneur d'épingles doit être positionné de manière absolue dans le conteneur parent. Cela permet de placer des épingles individuelles indépendamment les unes des autres.

2. Calcul des tailles de colonnes et de gouttières :

Déterminez la largeur disponible pour les conteneurs d'épingles et calculez le nombre de colonnes qui s’adaptent confortablement. Utilisez la largeur de colonne obtenue et une taille de gouttière prédéfinie pour calculer les paramètres globaux de disposition.

3. Suivi de la hauteur basé sur un tableau :

Initialiser un tableau avec une longueur égale au nombre de colonnes. Au fur et à mesure que vous parcourez chaque broche, déterminez quelle colonne a la hauteur la plus courte à ce moment-là. Stockez cette hauteur dans l'élément de tableau correspondant.

4. Placement des broches :

Parcourez chaque broche et :

• Positionnez-le dans la colonne ayant la hauteur la plus courte (déterminée par le tableau).
• Définissez la propriété CSS "gauche" sur l'index de la colonne multiplié par la largeur de la colonne et la gouttière.
• Définissez la propriété CSS "top" sur la hauteur stockée dans le tableau pour la colonne sélectionnée.
• Mettez à jour la hauteur de la colonne (valeur du tableau) en y ajoutant la hauteur de l'épingle.

En adhérant à ces étapes, il est possible de créer une mise en page qui imite le comportement réactif et l'efficacité de l'épingle de Pinterest. algorithme de placement.

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!