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 height på 320px 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

25 Eksempler på Brand Identity Design Ferdig Høyre

Identity branding er en intergral del av virksomheten . Tross alt, har du sørget for at du kan markedsføre deg selv riktig. Det er ikke alltid lett å prøve å komme med et design som passer dine behov. Noe som ikke bare gjenspeiler det du står for, men viser også personligheten til ditt merke, enten det er ditt personlige merke eller for en bedrift du har.For å

(Tekniske og design tips)

Bygg Custom Responsive Progress Bars med ProgressBar.js

Progress bars er allment kjent av de fleste brukere på nettet. For utviklere er det ofte en komplisert prosess for å lage en fremdriftslinje fra bunnen av . Men med ProgressBar.js trenger du ikke!Dette gratis open source-biblioteket har ingen avhengighet og støtter alle de store nettleserne, inkludert IE9 +. S

(Tekniske og design tips)