Layout responsive stile Pinterest

[spaturnoz]

Ciao a tutti,
dovrei creare un sito con layout responsive stile pinterest. Se non avete pinterest un chiaro esempio lo trovate qui.
Se ridimensionate la pagina i vari moduli, mantenendo la propria dimensione, si organizzano in un numero inferiore o maggiore di colonne, a seconda della larghezza appunto.
Sapete dirmi come si può ottenere questo risultato? Qual è la logica? O magari qualche template html che posso scaricare per studiarlo e imparare come poter realizzarlo da capo.
Grazie mille!

[Simo990]

Ciao, puoi realizzarlo con le CSS3 columns, come in questa demo: http://cssdeck.com/labs/css-only-pin...columns-layout
Pero' non so quanto ti conviene, dato che il supporto dei browser e' ancora scarso. Se non ti importa degli utenti di IE vai pure con questa soluzione

In alternativa c'e' il magico jQuery Masonry.

[ac_socmel]

di pinterest non parlo perchè non lo conosco, ma il link che hai mostrato non ha niente di responsive secondo me basta

float: left;
    height: 290px;
    margin: 0 0 20px 25px;
    overflow: hidden;
    padding: 0;
    width: 230px;

[spaturnoz]

ciao socmel, grazie della risposta.
Alla fine ho trovato la soluzione giusta, si chiama jQuery Masonry ed è appunto un plugin jquery. Mi sa che ho sbagliato proprio categoria
È responsive nel senso che, pur non adattando la larghezza dei div alla finestra, i moduli si autoposizionano su un numero variabile di colonne in base alla pagina. Infatti così si adatta bene anche a tablet e soprattutto smartphone.
Grazie comunque per i tuoi consigli, molto gentile

[fcaldera]

non è necessario usare masonry: è sufficiente dare display: inline-block e vertical-align: top ai blocchi e questi andranno a capo in base allo spazio a disposizione.

[spaturnoz]

vero fcaldera, ci ero riuscito anche mettendo float ai moduli con il container al 100% di larghezza. Con Masonry però ottieni vari tipi di animazioni, anche usando css3, che comunque danno un tocco in più al layout.

[spaturnoz]

Originariamente inviato da Simo990
Ciao, puoi realizzarlo con le CSS3 columns, come in questa demo: http://cssdeck.com/labs/css-only-pin...columns-layout
Pero' non so quanto ti conviene, dato che il supporto dei browser e' ancora scarso. Se non ti importa degli utenti di IE vai pure con questa soluzione

In alternativa c'e' il magico jQuery Masonry.

Simo, scusami non avevo proprio visto la tua riposta (colpa del banner pubblicitario )
Si alla fine userò Masonry, è perfetto per quello che mi serve.

Grazie a tutti per i consigli!!!