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

6 enkle og effektive måter å øke hastigheten på Mac-en

Vi er alle imponert over den jevne kjøringen av Apple Mac OS X som vi sammenligner med det moderne Windows OS som Vista eller Windows 7. Det er imidlertid tider når Mac-maskinen din kan gå sakte når du legger inn flere ting på harddisken og arbeid systemet hardt. Det er kanskje en god tid å vurdere hvor flaskehalsen kunne være og rydde den .I dett

(Tekniske og design tips)

Google Hangouts Gjør virksomhetsbryteren møtt

Mens den konsumentfokuserte versjonen av Google Hangouts kan være død, fortsetter ånden i Hangouts i en ny videokonferanseapp som Google ringer "Møt" .Foreløpig bare tilgjengelig som en nettbasert plattform, ser det ut til å være en del av Googles G Suite-produkter, Meet by Google Hangouts, selv om funksjonen ennå ikke er oppført på G Suite-siden.Ifølge in

(Tekniske og design tips)