reproduisant la disposition absolue de div de Pinterest

La disposition div unique de Pinterest présente un défi aux programmeurs cherchant à reproduire ses fonctionnalités. La jQuery et le CSS personnalisés utilisés pour ajuster dynamiquement la disposition en fonction de la redimensionnement du navigateur et empêcher la dépendance à l'empilement vertical laissent beaucoup de réponse à se demander comment obtenir des résultats similaires. De chaque colonne. Cela permet de placer les broches individuelles indépendamment les unes des autres.

Calcul des tailles de colonne et de gouttière:

Déterminer la largeur disponible pour les conteneurs de broches et calculer le nombre de colonnes qui s'adaptent confortablement. Utilisez la largeur de colonne résultante et une taille de gouttière prédéfinie pour calculer les paramètres de mise en page globaux.
Suivi de hauteur basé sur le tableau:

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

Iterater via chaque broche et:
3. la positionner dans la colonne avec la hauteur la plus étroite (déterminée par l'arrêt). Index de colonne multiplié par la largeur et la gouttière de la colonne. Le comportement réactif de Pinterest et l'algorithme de placement de broches efficace.