Izveidojiet ātrās mūra režģa izkārtojumus ar Bricks.js

Tas vienmēr ir bijis diezgan vienkārši izveidot tīklus ar jQuery, izmantojot spraudņus un bezmaksas konsultācijas no izstrādātājiem.

Tomēr mūra režģi ir stingrāki, jo tie ir izveidoti nevienmērīgi novietojiet lapu. Kolonnām būs fiksēta izmēra platumi, bet vienumu augstums var mainīties.

Lai veiktu a pixel-perfect mūra režģis jums ir nepieciešams spraudnis, piemēram, Bricks.js.

Šis spraudnis ir pilnīgi atvērtā koda un smieklīgi ātri. Tas būs padarīt režģi mazāk par pusi sekundes, pat ar desmitiem vienumu lapā.

Lielākā daļa cilvēku atzīst mūra režģus no Pinterest, jo tie popularizēja izkārtojumu. Bet kopš tā laika tas ir kļuvis izmanto daudzās citās tīmekļa vietnēs, arī.

Lai sāktu darbu ar Bricks.js, jums būs nepieciešams kādu saturu un a noklusējuma lapas izkārtojums. Spraudni instalējat tieši no npm vai caur GitHub, ja tas ir vieglāk.

Ar sākotnējo iestatījumu jūs nokārtojat trīs īpašus parametrus:

1. Konteiners - a DOM konteinera elements par tīklu
2. Iepakots - a atribūts kas nosaka, kā vienumi ieplūst tīklā
3. Izmēri - a platums un notekas, definēts pikseļos

Spraudnis izmanto visas šīs vērtības, lai automatizētu mūra režģi no nulles.

Un jūs pat varat izmantot to bezgalīgai iekraušanai ja vēlaties, lai mūra režģi darbotos tāpat kā Pinterest.

Iepazīstieties ar demo lapu, lai iegūtu interaktīvs tīkls ka varat mainīt testēšanai. Jūs definēt kopējo elementu skaitu un tas automatizēs procesu, vienlaikus parādot kopējo atveidošanas laiku.

Piemēram, es pārbaudīju režģi ar 500 elementi un tas notika tikai 13 milisekundes lai pabeigtu. Tas nenozīmē laiku, kad visi 500 attēli tiek ielādēti 13 ms automātiskajam tīklam ir ļoti iespaidīgs.

Sāciet sevi, lejupielādējot failus no GitHub un izpildot instalēšanas instrukcijas. Sākotnēji tas var justies mulsinoši, bet jo vairāk jūs spēlēt ar to, jo vieglāk ir izveidot.