Looge Bricks.jsiga kiireid müüritise võrgukujundusi

See on alati olnud üsna lihtne luua jQueryga võrke, pluginate ja vabade õpetajate kasutamine arendajatelt.

Samas on müüritise võrgud karmimad ehitamiseks, kuna need on ei sobi ühtlaselt üle lehe. Kolonnide jaoks on fikseeritud suurusega laiused, kuid üksuste kõrgused võivad erineda.

Et teha piksel-täiuslik müüritusvõrk vajate sellist pluginat nagu Bricks.js.

See plugin on täiesti avatud ja naeruväärselt kiire. See läheb muuta võrk vähem kui poole sekundiga, isegi kümnete üksustega objektil.

Enamik inimesi tunnustab müüritise võrke Pinterestist, kuna need on paigutuse populariseerimise järel. Kuid see on sellest ajast peale kasvanud kasutatakse paljudes teistes veebisaitides, ka.

Bricks.jsiga alustamiseks on vaja sisu ja a lehe vaikimisi paigutus. Paigaldate plugina otse npm-st või GitHubi kaudu, kui see on lihtsam.

Esialgse seadistamise korral liigute kolm konkreetset parameetrit:

1. Konteiner - a DOM konteineri element võrgu jaoks
2. Pakitud - a atribuut mis määrab, kuidas esemed võrgus voolavad
3. Suurused - a laiused ja vihmaveetorud, määratletud pikslites

Plugin kasutab kõiki neid väärtusi müüritise võrgu automatiseerimiseks nullist.

Ja saate isegi kasutage seda lõputu laadimiseks kui soovite müüritise võrke, mis töötavad nagu Pinterest.

Tutvu demo lehega interaktiivne võrk mida saate testimiseks muuta. Sina määratleda elementide koguarv ja see automatiseerib protsessi, näidates kogu renderdamisaega.

Näiteks katsetasin võrku koos 500 elementi ja see võttis ainult 13 millisekundit lõpetama. See ei mõjuta kõigi 500 pildi laadimise aega 13 ms auto genereeritud võrku on väga muljetavaldav.

Alusta ennast, allalaadides failid GitHubist ja järgides installijuhiseid. See võib alguses tunduda segadust tekitavana, kuid mida rohkem mängid, seda lihtsam on seadistada.