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

375.000 stykker kunst du kan bruke uten begrensninger

I 2014 lagde det New York-baserte Metropolitan Museum of Art 400.000 bilder med høy oppløsning av ulike kunststykker og fotografier til offentlig bruk. Rask frem til 2017 har Metropolitan Museum laget ytterligere 375.000 bilder tilgjengelig for bruk av publikum uten begrensninger.Metropolitan Museums beslutning om å gjøre bildene tilgjengelige for offentlig bruk er en del av sin åpen tilgangspolicy. Utf

(Tekniske og design tips)

10 Awesome PostCSS-plugins for å gjøre deg til en CSS-veiviser

PostCSS har nylig blitt den nye kule fyren i webutviklingssirkler, og med rette, da det gir en flott måte å øke hastigheten på arbeidsflyten i frontend-utviklingen, og forbedre kvaliteten på CSS . Det er et utrolig allsidig verktøy som gjør det mulig å transformere CSS-stiler med JavaScript-plugins . Dens f

(Tekniske og design tips)