web-dev-qa-db-fra.com

comment répliquer la disposition d'empilement div absolue de pinterest.com

Je cherche à reproduire la disposition de Pinterest.com, en particulier la manière dont le nombre de colonnes s’adapte mieux/moins au redimensionnement du navigateur et que l’empilement vertical ne dépend pas de la hauteur des colonnes adjacentes. Le code source montre que chaque div est une position absolue. Un co-fondateur a répondu à un article de Quora en indiquant que cela était fait avec jQuery personnalisé et CSS. Je voudrais que les résultats soient triés de gauche à droite. Toute directive que vous pourriez donner pour le faire moi-même serait grandement appréciée.

jquerycsslayout
104
chrickso

Vous pouvez également vérifier sur le plug-in jQuery Maçonnerie , pour ce type de fonctionnalité.

79
Bob.

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

Préalablement:

  • Positionner absolument les conteneurs à broches
  • Déterminer la largeur de la colonne
  • Déterminer la marge entre les colonnes (la gouttière)

Mettre en place un tableau:

  • Obtenir la largeur du conteneur parent; calculer le nombre de colonnes qui conviendront
  • Créez un tableau vide, avec une longueur égale au nombre de colonnes. Utilisez ce tableau pour stocker la hauteur de chaque colonne lors de la création de la présentation, par exemple. la hauteur de la colonne 1 est stockée sous forme de tableau [0]

Boucle à travers chaque épingle:

  • Placez chaque broche dans la colonne la plus courte au moment où elle est ajoutée
  • "left:" === la colonne # (tableau d'index) fois la largeur de la colonne + la marge
  • "top:" === La valeur dans le tableau (hauteur) pour la colonne la plus courte à ce moment
  • Enfin, ajoutez la hauteur de la broche à la hauteur de la colonne (valeur du tableau)

Le résultat est léger. Sous Chrome, la mise en page complète de plus de 50 broches prend moins de 10 ms.

183
Evan Sharp

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

57
GBKS

Après avoir examiné toutes les options, j'ai finalement implémenté la mise en page de la manière suivante:

Toutes les DIV sont:

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

Cela les rend mieux placés dans les lignes que lorsqu’ils sont flottants.

Ensuite, lorsque la page est chargée, j'itère toutes les DIV en JavaScript pour supprimer les espaces entre elles. Cela fonctionne bien lorsque:

  1. Les DIV ne sont pas très différentes en hauteur.
  2. Certaines infractions mineures à la commande ne vous dérangent pas (certains éléments ci-dessous peuvent être récupérés ci-dessus).
  3. Vous ne craignez pas que la ligne de fond soit de hauteur différente.

L'avantage de cette approche - votre code HTML a du sens pour les moteurs de recherche, peut fonctionner avec JavaScript désactivé/bloqué par un pare-feu, la séquence d'éléments en HTML correspond à la séquence logique (les éléments les plus récents avant les plus anciens).

2
esp

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

0
ant_Ti

Pourquoi n'essayez-vous pas cela, des choses simples en js

http://Vanilla-masonry.desandro.com/index.html

Ou même cela avec jQuery et le chargement de défilement.

http://masonry.desandro.com/index.html

0
A Bright Worker

Vous pouvez utiliser des flotteurs et dimensionner vos largeurs de div en utilisant des pourcentages associés à min-width pour forcer les div à tomber automatiquement une fois que la largeur minimale est atteinte. C'est la façon dont nous avons eu le travail sur http://www.goldtree.co.za/work

0
I Am Goldtree