no.hideout-lastation.com
Paradis For Designere Og Utviklere


Lag enkelt Dynamic Grid Layout With FreeWall

Hvis du er kjent med Windows 8 eller Pinterest, vet du om det dynamiske gridoppsettet. Et dynamisk grid er et oppsett der du kan omorganisere og omplassere barnelementer etter behov, eller når du har endret nettleseren din. Et populært jQuery-plugin som brukes til å lage denne utformingen, er jQuery Masonry, men hvis du vil ha flere alternativer og til og med animasjon, sjekk ut FreeWall.

FreeWall er en gratis jQuery plugin fra Minh Nguyen som du kan bruke til å lage mange grid layout typer : fleksibel layout, metro stil layout, nested grids, bildeoppsett og fluid grid. Den har også støtte for responsiv design, slik at du kan vise nettstedet ditt på skrivebord, mobil eller nettbrett.

Dessuten har det også veldig hyggelige CSS animasjoner og tilbakekallingshendelser som onGapFound, onComplete, onResize og onSetBlock.

Starter

For å komme i gang med FreeWall må du inkludere jQuery eller Zepto-rammeverket. I denne grunnleggende veiledningen skal vi bruke jQuery som et eksempel for å lage en vanlig grid layout demo.

La oss først inkludere jQuery-rammen og FreeWall-pluginet med følgende kode.

Vi vil vise noen mursteinstykker til containeren av oppsettet.

Normalt rutenett

Og definer våre mursteinstørrelser med width og height320px ved hjelp av 320px nedenfor:

 .size320 {width: 320px; høyde: 320px; } 

Nå, for å legge til noe javascript kode.

Få det til å fungere

For å gi tilfeldig farger til mursteinene, definerer vi noen fargestrukturer og bruker dem til teglsteinene ved hjelp av Math.random() -metoden.

 var farge = ["rgb (142, 68, 173)", "rgb (243, 156, 18)", "rgb (211, 84, 0)", "rgb (0, 106, 63)", "rgb (41, 128, 185) ", " rgb (192, 57, 43) ", " rgb (135, 0, 0) ", " rgb (39, 174, 96) "]; hver (funksjon () {var backgroundColor = farge [color.length * Math.random () << 0]; var murstein = $ (dette) .find (". ");! bricks.length && (murstein = $ (dette)); bricks.css ({backgroundColor: backgroundColor});}); 

Til slutt skal vi legge til funksjoner for å gjøre layoutvisningen godt. Her er det som gjør FreeWall flott. Det har noen alternativer og metoder for å kontrollere nettets oppførsel. Alternativene som tilbys av FreeWall er:

 animere: true, // True til å gjøre blokk flytte med animasjon. block.flex: true, // True til laget blokk kan endre størrelsen litt for å passe. cell.width: tall, cell.height: number, fillGap: true, // True vil lage layout uten gap. renner: blandet, // Avstanden mellom blokkene. selector: string, // Få alle blokkene til laget layout. 

La oss ringe pluginet ved hjelp av følgende kode.

 $ (funksjon () {$ {"fri vegg"). hver (funksjon () {var vegg = ny freewall (denne); wall.reset ({selector: '.size320' var cellWidth = 320; hvis (container.hasClass ('size320')) {cellWidth = container.width () / 2;} returnere cellWidth;}, cellH: funksjon (container) {var cellHeight = 320; if (container.hasClass ('size320')) {cellHeight = container.height () / 2;} returnere cellHeight;}, fixSize: 0, gutterY: 20, gutterX: 20, onResize: function () {wall.fitWidth ();}}) wall.fitWidth ();}); $ (vindu) .trigger ("resize");}); 

Som du kan se i funksjonskoden ovenfor bruker vi noen av FreeWall-alternativet, metoden og arrangementet. Liker fixSize, gutterY, gutterX, onResize og fitWidth . Hvis du vil bruke et annet alternativ, metode eller arrangement, kan du finne dokumentasjonen på FreeWalls offisielle hjemmeside.

Nå kan du se det dynamiske gridoppsettet i handlingen på demoversiden. Hvis du endrer størrelsen på nettleseren din, blir mursteinene automatisk omorganisert og endret.

  • Se demo
  • Last ned kilde

Design Vs Art - Forskjellen og hvorfor det gjelder

Design Vs Art - Forskjellen og hvorfor det gjelder

Design mot kunst. Hva er forskjellen, og hvordan påvirker det karrieren din som designer? Vi vet alle at det er forskjell, og de utenfor vår bransje kan kanskje ikke se det . Foreldrene dine, for eksempel, kan referere til deg som en "artist" selv om du er profesjonell designer.Hvordan forteller du dem, eller noen andre som spør, at det er stor forskjell mellom kunst og design ? E

(Tekniske og design tips)

Ultimate Guide til WordPress Post Revisions

Ultimate Guide til WordPress Post Revisions

En av de beste tingene med WordPress er det innebygde revisjonskontrollsystemet . Du trenger ikke å bekymre deg for at du mister en tidligere versjon av skrivingen, da hver revisjon lagres separat i databasen, og du kan enkelt flytte frem og tilbake mellom dem.WordPress 'revisjonssystem fungerer på samme måte som kodeversjonskontrollsystemer som Git eller Subversion, bare det er nesten fullstendig automatisert (du trenger ikke å plage med et kommandolinjeverktøy). Det

(Tekniske og design tips)