Tre super enkla sätt att dra av en masonrylayout

Masonry stil layouter push gränserna för kreativa layout tekniker. Jag älskar personligen hur kapabel de visar sig vara på att maximera effektiviteten hos gallerier som innehåller föremål med varierande höjder. Varje bit av skärmutrymme används och resultatet kan vara ordentligt fascinerande.

Idag kommer vi att dyka in i konceptet, idéer och populära tekniker som för närvarande förekommer i masonry-layouter. Vi lär oss tre olika metoder för att dra av en murverkslayout, diskutera insatserna och varje utseende och se till att resultatet är vackert responsivt och reflows baserat på webbläsarens bredd.

Vad är en Masonry Layout?

När du flyter objekt i CSS, organiserar webbläsaren element först horisontellt sedan vertikalt. När vi fyller en behållare med en massa likformade föremål och flyter dem till vänster, får vi ett bra galler av bilder.

Om objekten har variabla höjder är resultaten dock mycket svårare att förutsäga. Istället för ett snyggt tätt nät får vi något som tenderar att vara ganska utspridda.

Den uppenbara frågeställningen här är hur man drar av ett fint tätt galler som med föremål som har varierande höjder. Det är ett ganska intressant ämne och olika utvecklare har kommit upp på flera sätt att gå om det. Låt oss ta en titt på tre av de nuvarande bästa lösningarna.

För att gå ett steg längre, kommer vi att se till att alla tre lösningarna är mottagliga, vilket betyder att gallret kommer att flyta när fönstret förändras.

jQuery Masonry

jQuery Masonry är den mest populära lösningen för att dra av den här typen av layout. Det använder några ganska snygga JavaScript för att återlämna en serie av divs.

Att lägga Masonry i praktiken är ganska lätt, allt du behöver är en behållare som har en serie av divs som du vill arrangera masonry stil. Du kan placera allt du vill ha inom divs, i det här fallet slängde jag i några platshållare bilder.

När du har det i ordning, kasta i jQuery och jQuery Masonry. Då behöver du skapa en enkel funktion som identifierar din behållare och riktar sig till den klass som vi använde för våra Masonry-bildsegment. Här är ett grundläggande exempel:

<img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_4.jpg"> <h2>Wookmark</h2> <img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_5.jpg"> <p>En annan populär JavaScript-lösning för att uppnå samma typ av layout är Wookmark.js, vilket är drivprogrammet bakom Pinterest-liknande Wookmark.com.</p> <p>Wookmark.js är enligt min mening lite knepigare att implementera än jQuery Masonry på grund av bristen på dokumentation, men det är fortfarande ganska grundläggande saker. Allt vi behöver göra för att börja är att kasta en massa bilder i en orörd lista. Fångsten med denna plugin är att vi måste deklarera inlinehöjdvärden för var och en av bilderna.</p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_6.jpg"> <h2>Ren CSS</h2> <p>JavaScript-lösningarna är förmodligen det säkraste och mest kompatibla sättet att gå om en murkonstruktion, men CSS-nerden i mig visste att det var nödvändigt att ta bort det utan JavaScript.</p> <p>Det visar sig, det är faktiskt ganska enkelt att använda några snygga CSS3. Denna teknik var banbrytande av Radu Chelariu hos SickDesigner och även om det inte är så kraftfull, flexibel eller kors-webbläsarkompatibel som tidigare alternativ, är det fortfarande extremt imponerande med tanke på att det är allt CSS.</p> <p>Till att börja med, låt oss använda samma oordnade lista som vi gjorde förra gången (inga inline-stilar behövs), kastade in i en container div. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_7.jpg"> <h2>Slutsats</h2> <p>I en ny artikel om Pinterest diskuterade jag hur mäktiga masonry-layouter kan vara ur UX-perspektiv, särskilt i kombination med oändlig rullning.</p> <p>Du kan definitivt förvänta dig att den här trendiga trenden kommer att öka i popularitet och innan du vet det kommer du att få kunder att fråga om en layout som den som de ser på Pinterest. När det händer kommer du nu att förberedas med inte en, men tre möjliga lösningar!</p></li></ul>