Tre modi super facili per estrarre un layout in muratura

I layout in stile massoneria spingono i confini delle tecniche di layout creativo. Personalmente, adoro quanto siano capaci di provare a massimizzare l'efficienza delle gallerie che contengono oggetti di varie altezze. Viene utilizzato ogni bit dello spazio dello schermo e il risultato può essere addirittura ipnotizzante.

Oggi approfondiremo concetti, idee e tecniche popolari attualmente prevalenti nei layout in stile muratura. Impareremo tre diversi metodi per estrarre un layout in muratura, discutere i dettagli di ciascuno e assicurarsi che il risultato sia splendidamente reattivo e basato sulla larghezza del browser.

Cos'è un layout in muratura?

Quando si spostano gli oggetti in CSS, il browser dispone gli elementi prima orizzontalmente e poi verticalmente. Quando riempiamo un contenitore con un mucchio di oggetti di dimensioni uguali e li facciamo galleggiare a sinistra, otteniamo una bella griglia di immagini.

Tuttavia, se gli oggetti hanno altezze variabili, i risultati sono molto più difficili da prevedere. Invece di una bella griglia stretta, otteniamo qualcosa che tende ad essere abbastanza sparpagliato.

L'evidente dilemma qui è come tirare fuori una bella griglia stretta con oggetti che hanno altezze variabili. È un argomento piuttosto interessante e vari sviluppatori hanno inventato diversi modi per farlo. Diamo un'occhiata a tre delle migliori soluzioni attuali.

Per fare un ulteriore passo avanti, ci assicureremo che tutte e tre le soluzioni siano reattive, il che significa che la griglia si rifletterà al variare delle dimensioni della finestra.

jQuery Massoneria

jQuery Masonry è la soluzione più popolare per realizzare questo tipo di layout. Utilizza alcuni JavaScript piuttosto fantasiosi per ridisporre una serie di div.

Mettere in pratica la Massoneria è abbastanza semplice, tutto ciò di cui hai bisogno è un contenitore che contenga una serie di div che vuoi sistemare nello stile della muratura. Puoi inserire qualsiasi cosa tu voglia all'interno dei div, in questo caso ho gettato alcune immagini segnaposto.

Dopo averlo ordinato, lancia in jQuery e jQuery Masonry. Quindi devi creare una semplice funzione che identifica il tuo contenitore e targetizza la classe che abbiamo usato per le nostre immagini in muratura. Ecco un esempio di base:

<img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_4.jpg"> <h2>Wookmark</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_5.jpg"> <p>Un'altra popolare soluzione JavaScript per ottenere lo stesso tipo di layout è Wookmark.js, che è il plug-in di guida dietro a Wookmark.com simile a Pinterest.</p> <p>Wookmark.js è a mio avviso un po 'più complicato da implementare rispetto a jQuery Masonry a causa della mancanza di documentazione, ma è comunque roba abbastanza di base. Tutto quello che dobbiamo fare per iniziare è lanciare un gruppo di immagini in una lista non ordinata. Il trucco con questo plugin è che dobbiamo dichiarare valori di altezza in linea per ciascuna delle immagini.</p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_6.jpg"> <h2>CSS puro</h2> <p>Le soluzioni JavaScript sono probabilmente le modalità più sicure e più ampiamente compatibili per realizzare un layout in muratura, ma il nerd CSS in me sapeva che doveva esistere un modo per farlo fuori senza JavaScript.</p> <p>Si scopre che in realtà è piuttosto semplice con alcuni fantasiosi CSS3. Questa tecnica è stata introdotta da Radu Chelariu presso SickDesigner e, sebbene non sia così potente, flessibile o compatibile con i browser, come le precedenti opzioni, è comunque estremamente impressionante dato che è tutto CSS.</p> <p>Per iniziare, usiamo la stessa lista non ordinata che abbiamo fatto l'ultima volta (non sono necessari stili in linea), gettati in un contenitore div. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_7.jpg"> <h2>Conclusione</h2> <p>In un recente articolo su Pinterest, ho discusso su come i potenti layout di muratura possono essere da una prospettiva UX, specialmente se combinati con lo scrolling infinito.</p> <p>Puoi sicuramente aspettarti che questa tendenza in erba aumenti di popolarità e prima che tu te ne accorga, avrai clienti che chiedono un layout come quello che vedono su Pinterest. Quando ciò accadrà, sarai preparato con non una, ma tre possibili soluzioni!</p></li></ul>