comment répliquer la disposition absolue des empilements div de pinterest.com

Question

Je cherche à reproduire la disposition div de Pinterest.com, en particulier comment le nombre de colonnes s'ajuste pour s'adapter plus ou moins au redimensionnement du navigateur et que l'empilement vertical ne dépend pas des hauteurs de colonne adjacentes. Le code source montre que chaque div est la position absolue. Un co-fondateur a répondu à un message de Quora en déclarant que cela se faisait avec jQuery et CSS personnalisés. Je voudrais que les résultats soient classés de gauche à droite. Toute direction que vous pourriez fournir pour le faire moi-même serait grandement appréciée.

Answer 1

J'ai écrit le Pinterest de script. Les ID ne sont pas liés à la mise en page, et sont utilisés pour d'autres interactions liées à la JS. Voici la base de la façon dont il fonctionne:

Au préalable:

• Absolument position de la broche de conteneurs
• Déterminer la largeur de la colonne
• Déterminer la marge entre les colonnes (la gouttière)

L'installation d'un tableau:

• Obtenir la largeur du conteneur parent; calculer le nombre de colonnes qui correspondent
• Créer un tableau vide, avec une longueur égalant le nombre de colonnes. Utiliser ce tableau pour stocker la hauteur de chaque colonne que vous construisez la mise en page, par exemple la hauteur de la colonne 1 est stockée en tant que tableau[0]

Boucle sur chaque broche:

• Mettre chaque broche dans les plus brefs colonne à l'instant, il est ajouté
• de gauche":" = = = la colonne # (indice de tableau) fois la largeur de la colonne + marge
• "en haut:" === La valeur dans le tableau (hauteur) pour le plus court de la colonne à l'époque
• Enfin, ajouter la hauteur de la broche à la hauteur de la colonne (tableau de la valeur)

Le résultat est léger. Dans Chrome, portant sur une pleine page de+ de 50 épingles prend <10ms.

Answer 2

Vous pouvez également vérifier la Plug-in Masonry jQuery, pour ce type de fonctionnalité.

Answer 3

Nous avons publié un plugin jQuery car nous avons eu la même question plusieurs fois pour Wookmark . Il crée exactement ce type de disposition. Voir ici - Wookmark plugin jQuery

Answer 4

Après avoir examiné toutes les options, j'ai fini la mise en œuvre de la disposition similaire à Pinterest de cette façon:

Tous les DIVs sont:

div.tile {
    display: inline-block;
    vertical-align: top;
}

Cela rend leur position dans les lignes mieux que quand ils sont en circulation.

Puis, quand la page est chargée, je itérer tous les DIVs en JavaScript pour supprimer les blancs entre eux. Il fonctionne de façon acceptable lorsque:

1. Les DIVs ne sont pas très différents de hauteur.
2. Vous n'avez pas l'esprit de certaines violations mineures de la commande (certains éléments qui ont été ci-dessous peut être tiré vers le haut au-dessus).
3. Vous n'avez pas l'esprit de la ligne de fond étant de taille différente.

L'avantage de cette approche - votre format html faire sens pour les moteurs de recherche, peut travailler avec Javascript désactivé/bloqué par le pare-feu, la séquence d'éléments de code HTML correspond à la séquence logique (les nouveaux articles avant de les plus âgés). Vous pouvez le voir, c'est de travailler à http://SheepOrPig.com/news

Answer 5

Ils divisent les entités par colonnes avec des identifiants (mauvaise solution ... mieux utiliser les noms de classes) puis calculent les positions par groupes de colonnes