Sukurkite greitus mūro tinklelio išdėstymus su „Bricks.js“

Tai visada buvo gana paprasta sukurti tinklus su jQuery, naudojant „plugins“ ir nemokamus vadovus iš kūrėjų.

Tačiau mūro tinkleliai yra sunkesni statyti, nes jie yra netinka vienodai visame puslapyje. Stulpeliams turėsite fiksuoto dydžio plotis, bet elementų aukščiai gali labai skirtis.

Padaryti „pixel-perfect“ mūro tinklelis jums reikia papildinio, pvz Bricks.js.

Šis įskiepis yra visiškai atviras ir juokingai greitas. Tai bus tinklelį padaryti mažiau nei pusę sekundės, net ir dešimtis elementų puslapyje.

Daugelis žmonių pripažįsta mūro tinklus iš Pinterest, nes jie populiarino maketą. Bet nuo to laiko jis išaugo naudojama daugelyje kitų svetainių, taip pat.

Jei norite pradėti naudoti „Bricks.js“, jums reikės turinio ir a numatytasis puslapio išdėstymas. Įrenginį įdiekite tiesiai iš „npm“ arba per „GitHub“, jei tai lengviau.

Su pradiniu nustatymu pereinate tris konkrečius parametrus:

1. Konteineris - a DOM konteinerio elementas tinklui
2. Supakuota - a atributas kuri nustato, kaip elementai teka tinkle
3. Dydžiai - a plotis ir latakai, apibrėžta pikseliais

Įskiepis naudoja visas šias vertes, kad automatizuotų mūro tinklelį nuo nulio.

Ir netgi galite naudoti ją begaliniam krovimui jei norite, kad mūro tinkleliai veiktų kaip Pinterest.

Patikrinkite demonstracinį puslapį interaktyvus tinklas kad galėtumėte pakeisti bandymui. Tu nustatyti bendrą elementų skaičių ir jis automatizuos procesą rodydamas bendrą atvaizdavimo laiką.

Pavyzdžiui, išbandžiau tinklelį su 500 elementų ir tai tik užtruko 13 milisekundžių pabaigti. Tai neturi įtakos visiems 500 vaizdų įkėlimo laikui 13 ms automatiškai generuojamam tinklui labai įspūdingas.

Pradėkite save, atsisiųsdami failus iš „GitHub“ ir atlikdami diegimo instrukcijas. Tai gali jaustis paini pradžioje, bet kuo daugiau žaisite su juo, tuo lengviau jį nustatyti.