Innhold
- 01. Sette opp mur
- 02. Problemer med bilder
- 03. Ideer for avanserte brukere
- 04. Problemer med bedriftsbruk
- 05. Feilsøking av murverk
- 06. Konklusjon
- Kunnskap som trengs: Grunnleggende HTML, CSS og JavaScript / jQuery
- Krever: Teksteditor, moderne nettleser
- Prosjekt Tid: 1 time
- Støttefil 1
Denne artikkelen dukket først opp i nummer 229 av .net magazine.
Eksplosjonen av Pinterest har fått sin ros og design og brukeropplevelse. Men med mindre du har bodd i en hule de siste to årene, har du sannsynligvis sett et lignende konsept på mange mindre nettsteder, som porteføljesider og Tumblr-kontoer. Dette er mulig via Masonry, en dynamisk rutenettplugg-plugin for jQuery - Pinterest har laget tilpasset skript for dette, men konseptet er identisk med Masonry’s. David DeSandro, Masonrys skaper, beskriver det som "baksiden av CSS-floater". I tradisjonelle CSS-flottører arrangeres objekter horisontalt og deretter vertikalt. Murverk reverserer dette, og kan optimalisere tilgjengelig plass i et rutenett.
Murverk måler alle varene du serverer og omorganiserer dem på den beste måten med det som er tilgjengelig i rom. Denne løsningen fungerer spesielt godt med bildebasert innhold, og muliggjør en praktisk talt sømløs vegg av bilder samlet sammen. Uten murverk ville et design som dette være praktisk talt umulig, men plugin-modulen gjør det oppnåelig på bare noen få linjer med JavaScript.
01. Sette opp mur
Før du begynner, må du konfigurere grunnleggende HTML, CSS og JavaScript. Jeg har tatt med en forenklet versjon av dette fra HTML5 Boilerplate. I demo.html fil, har jeg lagt til 10 forskjellige elementer jeg vil skal legges ut av murverk. Hvert av disse elementene har en klasse på punkt og inneholder ganske enkelt et bilde. Våre style.css filen deklarerer de grunnleggende stilene for disse elementene, og lager dem 300px bred, skjerm blokkere, flyte venstre og har topp- og høyre margin på 20px.
La oss se på hvordan dette ser ut før murverk blir brukt. Kommenter i demofilene dine script.js nederst i demo.html fil for 'un-Masoned' layout. Du vil merke inkonsekvent vertikalt avstand mellom bildene: høyere bilder på rad vil skape et mellomrom under de andre elementene, noe som gjør layoutet ditt slurvet. Med mindre du har en spesifikk beskåret størrelse for alle elementer eller statisk innhold som du kontrollerer, kan en løsning som viser et utvalg av innhold på en ensartet måte være vanskelig. Mur skinner her, og optimaliserer layoutet til det dynamiske innholdet ditt på farten.
Vi er klare til å bruke murverk, så kompromissløs script.js. Lage en $ (dokument). klar() funksjon og ring Masonry-funksjonen på innholdsbeholderen vår.
$ (dokument). klar (funksjon () {
$ ('# Content'). Murverk ({
columnWidth: 320,
itemSelector: ’.item’
imagesLoaded (funksjon () {
$ ('# Content'). Murverk ('reload');
});
});
Murverk har flere muligheter, men disse er de to viktige. kolonnebredde angir minimum bredde for hver kolonne. Dette tar hensyn til polstring og marginer, så 320 er for et bredde på 300 piksler pluss 20 piksler av høyre marg. itemSelector spesifiserer CSS-velgeren for alle elementene som vil bli berørt av murverk. Vi ringer også til en plugin-modul som leveres med murverk bilderLastet som forteller murverk om å laste om - men vi kommer til det senere.
La oss nå se på utdataene; det er viktig å forstå hvordan dette oppnås. Vi kan se nå at murbeholderen vår, #innhold, har fått en klasse av . murverk og får en relativ posisjon og hardkodet høyde i piksler. Hva dette gjør er at hvert element eller murstein kan plasseres absolutt med en nøyaktig topp- og venstremåling basert på mursteins bredde og høyde.
02. Problemer med bilder
En av de vanligste problemene med mur er elementer, spesielt bilder, som overlapper hverandre. Murverk fungerer ved å måle alle tilgjengelige murstein, og passer hver enkelt sammen basert på disse målene. Problemet er at når murverk måler elementene, kan det hende at bildene ikke lastes inn - så murverk måler mursteinen uten bildedimensjonene. Dette betyr at i stedet for å ha full høyde (eller bredde) på bildet, vil det bare ta en enkelt linje.
Det er forskjellige måter å overvinne dette på; hver har fordeler og ulemper. Den vanligste løsningen er å vente til alle bildene er lastet inn i nettleseren og deretter initialisere murverk. Du kan oppnå dette ved å bruke $ (vindu) .load () i stedet for $ (dokument). klar () for å begynne koden. Selv om dette gir ønsket utdata for murverk, får du brukeren til å vente på å få presentert oppsettet. Det vil også vise et kort øyeblikk av oppsettet ditt uten mur før det smekker på plass. Til slutt fjerner denne løsningen murverk-koden din fra resten av JavaScript, som adskiller logikken din og kan bli rotete hvis andre deler av koden stoler på at murverk blir startet først (for eksempel Infinite Scroll).
En mer robust løsning er å skrive ut bredden og høyden på hvert bildeelement i markeringen din. Ved å ha disse verdiene i markeringen, vil murverk måle dem riktig og ikke trenger å vente til bildet er lastet inn for å bestemme størrelsen. Den viktigste ulempen med dette er at det krever at du har hver dimensjon tilgjengelig og lagret i databasen din, noe som ikke alltid er mulig.
Siden dette problemet er utbredt, leveres murverk med bilderLastet, en plugin-modul som, ja, forteller deg når bildene dine lastes inn. bilderLastet har en tilbakeringingsfunksjon som utføres når alle bildene er lastet inn, noe som er det ideelle stedet å initialisere murverk. Jeg anser det mest allsidige alternativet å ringe murverk på dokument. klar og måle igjen når bildene er lastet inn. For å gjøre dette må du bruke murverk last inn på nytt metode. Jeg foretrekker dette, fordi det gjør det mulig å holde logikken din på ett sted, og tvinger ommålingen når bildene er klare.
03. Ideer for avanserte brukere
Gratulerer, du har konfigurert Masonry-oppsettet ditt - men dette skraper bare overflaten av hva Masonry kan gjøre. Når du har konfigurert den første murte forekomsten, kan du endre den ved hjelp av plugin-modulene. Dette er tilleggsfunksjoner som er innebygd i murverk for å hjelpe deg med å gjøre akkurat det du vil ha det, for eksempel å legge til og slette ting, måle mursteinsstørrelser og mye mer. Du har også muligheter for å animere innhold, legge til nye klosser - til og med RTL-støtte. For vårt eksempel, la oss lage en animert fleksibel bredde. Endre bredden på #innhold til auto og en margin til venstre og margin til høyre for auto i style.css.
#innhold {
margin: 0 auto;
bredde: auto;
}
Vi må også sette isFitWidth til tro mot vårt murverk-oppsett i script.js. isFitWidth er et alternativ i murverk for å bestemme størst mulig kolonnetall for nettleserens nåværende bredde. Dette er veldig nyttig for sentrering av innhold uten vanskelige hull; uten den vil murverk holde på det gjenværende rommet som ikke er så bredt som en kolonne, noe som betyr at containeren din aldri er sentrert.
$ ('# Content'). Murverk ({
// andre muralternativer
isFitWidth: sant
});
I nettleseren trykker du på Oppdater: du kan nå endre størrelsen på nettleseren din, og murverkbeholderen beregner bredden på nytt for å matche hvor mange kolonner den kan vises.
Mur kan også animere disse mursteinene når de går inn i sine nye posisjoner, takket være logikken som setter en venstre og topp CSS-verdi på hver murstein. Det er forskjellige måter å oppnå dette på, noen bedre enn andre. Det mest åpenbare er å bruke jQuery, som du kan slå på ved å ringe isAnimated: sant når du ringer på mur.
Dette gjør jobben, men jQuery-animasjon er avhengig av DOM-manipulering, og å ha flere store klosser kan redusere animasjonsytelsen og gjøre opplevelsen svak. En annen måte å oppnå det på er å bruke CSS-overganger, som vil animere venstre og topp CSS egenskaper. Å gå inn på alle fordelene ved å bruke CSS-overganger over jQuery-animasjoner er en helt egen diskusjon, men å bruke CSS til å gjøre animasjonene dine er mye mer robust og vil fungere bedre under nesten alle omstendigheter med murverk. For å bruke CSS-overganger, sett disse verdiene på .punkt i style.css, la venstre overgang til sin nye verdi, etterfulgt av topp en gang venstre har gjort animasjon.
-webkit-overgang: venstre .4s letthet inn-ut, topp .4s letthet-inn-ut .4s;
-moz-overgang: venstre .4s let-inn-ut, topp .4s let-inn-ut .4s;
-ms-overgang: venstre .4s letthet inn-ut, topp .4s letthet-inn-ut .4s;
-o-overgang: venstre .4s let-inn-ut, topp .4s let-inn-ut .4s;
overgang: venstre .4s let-inn-ut, topp .4s let-inn-ut .4s;
Selv om støtte for CSS-overganger har steget det siste året, støttes de ikke av eldre nettlesere som kan utgjøre en stor del av publikummet ditt. Hvis du vil bruke CSS-overganger uten å ofre animasjon for noen brukere, er det en måte å bruke begge animasjonsteknikkene for optimal ytelse, avhengig av nettleserfunksjonene. Dette bruker et JavaScript-bibliotek kalt Modernizr, som oppdager om en brukers nettleser har funksjoner som CSS-overganger tilgjengelig via Modernizr.cs overganger, som er satt til ekte eller falsk avhengig av brukerens støtte for CSS-overganger.
I Murer-oppsettet ditt må du ringe opp følgende kode.
$ ('# Content'). Murverk ({
// alle andre muralternativer
isAnimated:! Modernizr.csstransisjoner
});
Dette er den ideelle måten å utføre animasjon på, fordi du betjener brukeren best mulig opplevelse. Brukere som kan dra nytte av CSS-overganger er i stand til det, og de som ikke er, får fortsatt animasjon via jQuery.
04. Problemer med bedriftsbruk
Murverk har stor bruk i Tumblr og mindre nettsteder, og er lett nok til å initialisere. Men å sette det opp for bedriftsbruk er et helt annet ballspill, med sine egne problemer utenfor bildene som overlapper hverandre. Inntil nå har vi alltid visst hvor mange gjenstander som foregår i vår Masoned-layout, og vi har ikke tenkt på hvor noen av elementene ble plassert så lenge det ikke var noen overlapping.
Nøkkelen til nesten alle problemer med murverk er å laste inn på nytt, slik at du kan måle de nye elementene og passe dem inn i layoutet ditt. Noen ganger er dette mye lettere sagt enn gjort, spesielt når du laster inn iframes, innebygd innhold eller innhold fra et tredjepartsskript. Du kan utvide murverk for å måle disse elementene etter behov, og deretter ringe på murverkens omlastningsmetode slik:
$ ('# Content'). Murverk ('reload');
Mur vil optimalisere plasseringen av hver murstein som standard, men noen ganger trenger du et stykke innhold for å være konsistent i hvor den er plassert. Hvis dette gjelder deg, har murverk en funksjon som heter cornerStamp slik at du alltid kan ha en murstein på et bestemt sted. Dette fungerer via plug-in og sparer plass til denne mursteinen når du beregner layoutet, noe som er nyttig for reklame for spilleautomater eller reklamemateriale. Finn mer info på cornerStamp her.
05. Feilsøking av murverk
Hvis du fortsatt har problemer, er det ressurser der ute: bruk konsollen og se hva som skjer. Fra konsollen kan du oppdatere alternativer, utstede metoder, sjekke bredder og høyder og mer. Så hvis en eller flere murstein ikke blir målt riktig, kan du redigere CSS fra nettleserverktøyene og laste murverk på nytt for å se om endringene dine var vellykkede. Dataene fra hver murforekomst er også tilgjengelig. Du kan redigere alternativer på farten og se om Masoned-objektet ble initialisert riktig. For å se dette, skriv inn følgende i konsollen.
$ ('# Content'). Data ('murverk');
En annen god idé for alle som bruker murverk er å se på kildekoden på GitHub - den vedlikeholdes av DeSandro selv. Hvis du lurer på hvordan måling skjer, kan du finne funksjonen som gjør dette i oppsett() og _placeBrick (). Det er viktig å ha en ide om hva programtillegget gjør internt, spesielt hvis dette er nøkkelen til presentasjonen av nettstedet ditt.
Hvis du virkelig er stubbet, kan du alltid gå til Issues-delen på GitHub. Når du legger ut et problem, kan du prøve å være så beskrivende som mulig og ta med en lenke til hvor problemet oppstår. Å kunne se hva som går galt, gjør feilsøking uendelig enklere og vil spare alle involverte betydelige mengder tid. DeSandro har lagt ut retningslinjer for å sende inn et problem på Github-kontoen sin, som du kan se her.
06. Konklusjon
Forhåpentligvis har denne artikkelen vist deg noen av Masonrys evner - selv om jeg bare har dekket begynnelsen på hva som er mulig, og nye brukssaker blir stadig utviklet. Du kan utvide murverk med funksjonalitet som Infinite Scroll, flere forekomster og mer for å maksimere brukeropplevelsen. Murverk er en flott plugin-modul som har endret hvordan folk designer for og samhandler med nettet. Det blir bare bedre når flere deltar og bidrar.
Takk til Jacob Van Loon for bildene som ble brukt i denne opplæringen
Luke Shumard jobber som senior webdesigner for Dazed Digital og AnOther, to av de største uavhengige mote- og livsstilspublikasjonene i Storbritannia.
