come replicare il layout di stacking assoluto di pinterest.com [chiuso]

Sto cercando di replicare il layout div di Pinterest.com, in particolare il modo in cui il numero di colonne si regola per adattarsi di più / meno al ridimensionamento del browser e l'impilamento verticale non dipende dalle altezze delle colonne adiacenti. Il codice sorgente mostra che ogni div è posizione assoluta. Un co-fondatore ha risposto a un post di Quora affermando che è stato fatto con jQuery e CSS personalizzati. Vorrei che i risultati fossero ordinati da sinistra a destra. Qualsiasi direzione che potresti fornire per realizzarlo da solo sarebbe molto apprezzata.

Potresti anche controllare il jQuery Plug-in Masonry , per questo tipo di funzionalità.

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

In anticipo:

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

Imposta un array:

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

Fai scorrere ogni pin:

• Metti ogni pin nella colonna più corta nel momento in cui viene aggiunto
• "left:" === la colonna # (array dell'indice) moltiplicata per 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, il layout di una pagina intera di oltre 50 pin richiede <10 ms.

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

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

Tutti i DIV sono:

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

Questo li rende meglio posizionati nelle file rispetto a quando sono flottati.

Quindi, quando la pagina viene caricata, itero tutti i DIV in JavaScript per rimuovere gli spazi tra di loro. Funziona in modo accettabile quando:

1. I DIV non sono molto diversi in altezza.
2. Non ti dispiace alcune violazioni minori dell'ordine (alcuni elementi che erano sotto possono essere tirati su sopra).
3. Non ti dispiace che la linea di fondo sia di altezza diversa.

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 del vecchio)

Suddividono le entità per colonne con ID (soluzione sbagliata ... è meglio usare i nomi delle classi) e quindi calcolano le posizioni per gruppi di colonne

Perché non provi questa, semplice roba js

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

O anche questo con jQuery e con caricamento a scorrimento.

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

Potresti usare float e dimensionare le larghezze div utilizzando percentuali insieme a min-width per forzare la caduta automatica dei div una volta raggiunta la larghezza minima? È il modo in cui lo abbiamo fatto funzionare su http://www.goldtree.co.za/work