Vytvoření rozvržení rychlé zednické mřížky pomocí Bricks.js

Bylo to vždy jednoduché vytvářet mřížky s jQuery, použití pluginů a volných tutoriálů od vývojářů.

Nicméně, zednické mřížky jsou tvrdší stavět, protože oni nevejdou rovnoměrně po stránce. Pro sloupce budete mít šířky s pevnou velikostí výšky položek se mohou měnit divoce.

Udělat a pixel-perfektní zděné mřížky potřebujete plugin jako Bricks.js.

Tento plugin je zcela otevřený a směšně rychlý. Bude to mřížku za méně než půl sekundy, dokonce s desítkami položek na stránce.

Většina lidí rozeznává zdivo z Pinterestu, protože popularizoval rozvržení. Ale od té doby se rozrostla používá na mnoha jiných webových stránkách, také.

Chcete-li začít s Bricks.js, budete potřebovat nějaký obsah a výchozí rozvržení stránky. Plugin instalujete přímo od npm nebo přes GitHub, pokud je to jednodušší.

S počátečním nastavením přejdete tři specifické parametry:

1. Kontejner - A DOM kontejnerový prvek pro mřížku
2. Baleno - a atribut určuje, jak budou položky v mřížce procházet
3. Velikosti - a pole šířek a okapů, definované v pixelech

Plugin používá všechny tyto hodnoty k automatizaci zednické mřížky.

A můžete dokonce použít pro nekonečné zatížení chcete-li zednické mřížky, které fungují stejně jako Pinterest.

Podívejte se na demo stránku pro interaktivní mřížka můžete změnit pro testování. Vy definovat celkový počet prvků a proces bude automatizován při zobrazení celkového času vykreslování.

Například jsem testoval mřížku 500 prvků a to jen vzalo 13 milisekund dokončit. To se netýká doby, kdy se všech 500 snímků načte, ale 13 ms pro automaticky generovanou mřížku je velmi působivý.

Začněte sami stažením souborů z aplikace GitHub a podle pokynů k instalaci. To se může na první pohled zdát matoucí, ale čím více se s ním hračka bude, tím snadněji se nastaví.