come replicare il layout di stacking div assoluto di pinterest.com

Sto cercando di replicare il layout div di Pinterest.com, in particolare come il numero di colonne si adatta per adattarsi più o meno al ridimensionamento del browser e l’impilamento verticale non dipende dall’altezza delle colonne adiacenti. Il codice sorgente mostra che ogni div è la posizione assoluta. Un co-fondatore ha risposto a un post di Quora affermando che è fatto con jQuery e CSS personalizzati. Mi piacerebbe che i risultati fossero ordinati da sinistra a destra. Ogni direzione che potresti fornire per realizzarlo personalmente sarebbe molto apprezzata.

È anche ansible controllare la muratura plug-in jQuery, per questo tipo di funzionalità.

Ho scritto lo script Pinterest. Gli ID non sono correlati al layout e vengono utilizzati per altri JS correlati all’interazione. Ecco la base di come funziona:

In anticipo:

  • Posizionare assolutamente i contenitori dei pin
  • Determina la larghezza della colonna
  • Determina il margine tra le colonne (la grondaia)

Imposta un array:

  • Ottieni la larghezza del contenitore genitore; calcola il numero di colonne che si adatteranno
  • Crea un array vuoto, con una lunghezza pari al numero di colonne. Usa questa matrice per memorizzare l’altezza di ogni colonna mentre costruisci il layout, ad esempio l’altezza della colonna 1 viene memorizzata come array [0]

Passa attraverso ogni spillo:

  • Metti ogni spillo nella colonna più corta nel momento in cui viene aggiunto
  • “left:” === la colonna # (index array) moltiplica la larghezza della colonna + il margine
  • “top:” === Il valore nella matrice (altezza) per la colonna più corta in quel momento
  • Infine, aggiungi l’altezza del pin all’altezza della colonna (valore dell’array)

Il risultato è leggero. In Chrome, la visualizzazione di una pagina intera di 50+ pin richiede <10ms.

Abbiamo rilasciato un plugin jQuery perché abbiamo ottenuto la stessa domanda più volte per Wookmark . Crea esattamente questo tipo di layout. Vedi qui – Wookmark plugin jQuery

Avendo esaminato tutte le opzioni, ho finito per implementare il layout in modo simile a Pinterest in questo modo:

Tutti i DIV sono:

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

Questo li rende posizionati in file migliori rispetto a quando sono floated.

Quindi, quando viene caricata la pagina, eseguo l’iterazione di tutti i DIV in JavaScript per rimuovere gli spazi vuoti tra di essi. Funziona in modo accettabile quando:

  1. I DIV non sono molto diversi in altezza.
  2. Non ti preoccupa alcune piccole violazioni di ordinamento (alcuni elementi che erano sotto possono essere estratti sopra).
  3. Non ti dispiace che la linea di fondo sia di diversa altezza.

Il vantaggio di questo approccio: il tuo HTML ha senso per i motori di ricerca, può funzionare con JavaScript disabilitato / bloccato dal firewall, la sequenza di elementi in HTML corrisponde alla sequenza logica (gli elementi più recenti prima dei vecchi)

Suddividono le quadro per colonne con ID (soluzione errata … meglio usare i nomi delle classi) e quindi calcolano le posizioni per gruppi di colonne

Perché non provi questo, roba da js semplice

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

O anche questo con jQuery e con scroll di caricamento.

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

È ansible utilizzare i float e ridimensionare le larghezze div utilizzando le percentuali insieme alla larghezza minima per forzare i div a cadere automaticamente una volta raggiunta la larghezza minima? È il modo in cui l’abbiamo ottenuto lavorando su http://www.goldtree.co.za/work