Vytvorte rozloženie mriežky rýchleho muriva pomocou nástroja Bricks.js

Vždy bolo dosť jednoduché vytvorte mriežky s jQuery, pomocou doplnkov a bezplatných tutoriálov od vývojárov.

Avšak, muriva mriežky sú ťažšie stavať, pretože oni nezapadajú rovnomerne na stránku. Budete mať stĺpce s pevnou veľkosťou pre stĺpce, ale pre stĺpce Výška položiek sa môže veľmi líšiť.

Ak chcete urobiť pixel-perfektná muriva potrebujete doplnok ako napr Bricks.js.

Tento doplnok je úplne otvorený a smiešne rýchly. Bude to robí mriežku za menej ako pol sekundy, dokonca aj s desiatkami položiek na stránke.

Väčšina ľudí rozpozná murivo mriežky z Pinterest, pretože popularizovali rozloženie. Ale odvtedy sa rozrástla používané na mnohých iných webových stránkach, tiež.

Ak chcete začať s Bricks.js, budete potrebovať nejaký obsah a a predvolené rozloženie stránky. Inštalujete plugin priamo z npm alebo cez GitHub, ak to bude jednoduchšie.

Po úvodnom nastavení prejdete troch špecifických parametrov:

1. kontajner - Prvok kontajnera DOM pre sieť
2. zabalený - atribút , ktoré určuje, ako tok tovaru v sieti
3. veľkosti - rad šírok a žľabov, definované v pixeloch

Doplnok používa všetky tieto hodnoty na automatizáciu muriva od začiatku.

A môžete dokonca použite na nekonečné načítanie ak chcete murivo mriežky, ktoré fungujú rovnako ako Pinterest.

Pozrite sa na demo stránku interaktívna sieť ktoré môžete zmeniť na testovanie. vy definujte celkový počet prvkov a automatizuje proces pri zobrazovaní celkového času vykresľovania.

Napríklad som testoval mriežku s 500 prvkov a to trvalo len 13 milisekúnd dokončiť. Toto neberie do úvahy čas na načítanie všetkých 500 obrázkov, ale 13 ms pre automaticky generovanú sieť je veľmi pôsobivé.

Začnite sami stahovaním súborov od spoločnosti GitHub a postupujte podľa pokynov na inštaláciu. To môže byť na prvý pohľad nejasné, ale čím viac sa s ním budete hrať, tým je ľahšie nastaviť.