jQuery: Plugin come la muratura per superare il dom-order e 3 dimensioni degli articoli

Question

questo potrebbe essere difficile da spiegare. Esiste un plug-in simile come la muratura di jQuery che è in grado di rilevare gli spazi in una griglia predefinita e spostare e posizionare gli elementi che si adattano a questi spazi?

Poiché tutti gli altri modi di spiegare la mia domanda sarebbero troppo complicati, ho disegnato un'immagine semplice per mostrare cosa intendo.

Avviso: è un webdesign fluido di risposta.

Quindi il mio dom-ordine è 1,2,3. Tuttavia, quando comprimo il mio layout all'interno di un certo media-query, voglio cambiare dinamicamente l'ordine dom o posizionare gli elementi in modo diverso. Proprio come vedi nel mio esempio.

So che ci sono cose come jQuery Masonry o jQuery Isotope ma entrambi questi plugin non riempiono tutti gli spazi vuoti della griglia. Per esempio. controllare questo isotopo screenshot ...

C'è un elemento mancante. Naturalmente nella maggior parte dei casi questo è ciò che si desidera mantenere l'ordine degli elementi. Nel mio caso non mi interessa l'ordine, voglio solo avere tutti gli spazi e le lacune piene. Quindi, esattamente come vedi il mio schizzo sopra, lo item-nr-3 dovrebbe essere spostato verso l'alto per adattarsi allo spazio vuoto (dato che si inserirà). E se ci fosse un altro item della stessa dimensione che si adatterebbe nel divario sotto item-nr-3.

È in qualche modo possibile? C'è qualche plugin jQuery che lo fa? O hai altri ida?

---

Alcune informazioni aggiuntive: Il items e le scatole di cui sto parlando sono tutti impostati per box-sizing:border-box in modo da non devono preoccuparsi di imbottiture o margini.

---

Aggiornamento: Ecco un esempio vivo del problema: http://jsfiddle.net/r79u2/1/

Answer 1

EDIT

Poiché il tempo di distacco questo ho aggiunto il supporto di "grondaie" e callbacks

Ho scritto un plugin che fa quello che stai cercando. Non esattamente, ma si potrebbe usare per puntare nella giusta direzione ...

Plugin - https://github.com/DrewDahlman/Mason

Post sulla teoria - http://www.drewdahlman.com/meusLabs/?p=218

L'idea è questa - sappiamo che abbiamo un numero di elementi - Il lavoro di Mason è di riempire uno spazio definito con questi elementi che sono flottanti a sinistra - questo si traduce in "lacune", quindi abbiamo bisogno di rilevare quelle lacune e in qualche modo riempirle con qualcosa.Per fare questo possiamo copiare un elemento già esistente oppure - possiamo avere un secchio di elementi "riempitivi" che possiamo riempire di quello spazio.

OP: se stai cercando una griglia di dimensioni casuali con un certo controllo questo farà il lavoro. Ho realizzato questo violino - http://jsfiddle.net/bdGVr/

Noterai che ogni volta che lo esegui o ridimensiona la finestra la griglia si ridisegna. Ciò comporterà eventuali spazi vuoti riempiti con un blocco rosso.

Giocando con le opzioni del mason.js è possibile regolare il rapporto che è la dimensione relativa al contenitore, nonché le possibili combo di dimensioni.

esempio: un rapporto di 1,8 e una dimensione di 1x3 significa 1,8 x 1 = Altezza e 1,8 x 3 = Larghezza.