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

Dette nettstedet kontrollerer om jobben din blir tatt over av roboter

Dette nettstedet kontrollerer om jobben din blir tatt over av roboter

Automatisering, scenariet der menneskelige arbeidere blir erstattet av roboter, blir stadig en realitet, takket være den raske forbedringen i både kunstig intelligens og robotteknologi .Å se at automatisering snart kan bli en del av livet, noen har begynt å lure på hvilke arbeidsplasser potensielt kunne bli tatt over av roboter. Hvi

(Tekniske og design tips)

Hvordan bli fet, kursiv, strenge på din WhatsApp

Hvordan bli fet, kursiv, strenge på din WhatsApp

Formatering kommer endelig til WhatsApp Messenger. Du kan nå skrive svarene dine i fet skrift, kursiv eller til og med gjennomstrømmende svarene dine til venner. Hvis du har oppdatert til den nyeste WhatsApp-versjonen, kan du sannsynligvis se noe slikt: For å dristige materialet ditt, bruk stjerner som dette * Dette er fet. *

(Tekniske og design tips)