Yocker
  1. Yocker
  3. come replicare il layout di stacking div assoluto di pinterest.com
Intereting Posts
AngularJS ha instradato l’errore 404 con la modalità HTML5 Quando si usa la parola chiave ref # C mai una buona idea? È questa infinita ricorsione UB? Come sfuggire JavaScript in JSP? Lodash: differenza tra .extend () / .assign () e .merge () Come istruire cron per eseguire un lavoro ogni due settimane? Aggiungi dynamicmente una class al contenitore ‘popover’ di Bootstrap Come posso ricaricare automaticamente un’estensione di Chrome che sto sviluppando? Come posso convertire un long in int in Java? Direttiva angular come aggiungere un attributo all’elemento? Eccezione gettata nel fermo e infine clausola Posso controllare la posizione delle impostazioni utente di .NET per evitare di perdere le impostazioni sull’aggiornamento dell’applicazione? Come fare una richiesta pull GitHub In che modo un metodo in MVC WebApi viene associato a un verbo http? Come capire la forma statica e la forma dynamic in TensorFlow?

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