Gyors kőműves rács elrendezések létrehozása a Bricks.js segítségével

Mindig nagyon egyszerű volt hozzon létre rácsokat a jQuery segítségével, pluginok és ingyenes fejlesztők használata a fejlesztőktől.

Azonban a falazó rácsok nehezebb építeni, mivel ezek nem egyenletesen illeszkedik az oldalra. Az oszlopokra fix méretű szélességű, de a az elemek magassága vadul változhat.

Ahhoz, hogy a pixel-tökéletes falazó rács szüksége van egy olyan bővítményre, mint például Bricks.js.

Ez a bővítmény teljesen nyílt forráskódú és nevetségesen gyors. ez lesz a rácsot kevesebb mint fél másodperc alatt teszi, még az oldal több tucat elemével is.

A legtöbb ember ismeri a falazó rácsokat a Pinterestről, mivel népszerűsítették az elrendezést. De azóta nőtt más weboldalakon használják, is.

A Bricks.js használatához szükséged lesz valamilyen tartalmat és a alapértelmezett oldalelrendezés. A plugint közvetlenül az npm-ről vagy a GitHub-on keresztül telepítheti, ha ez könnyebb.

A kezdeti beállítással átmegy három specifikus paraméter:

1. Tartály - egy DOM konténer elem a rács számára
2. Csomagolt - egy tulajdonság amely meghatározza, hogy az elemek hogyan áramlik a rácsban
3. méretek - egy szélességek és csatornák tömbje, pixelben definiált

A plugin mindezeket az értékeket használja a falazati rács automatizálására a semmiből.

És még használja a végtelen terheléshez ha azt szeretné, hogy a falazó rácsok a Pinteresthez hasonlóan működjenek.

Nézze meg a bemutató oldalt egy interaktív rács amit tesztelésre módosíthat. Ön meghatározza az összes elemszámot automatizálja a folyamatot, miközben megjeleníti a teljes megjelenítési időt.

Például egy rácsot teszteltem 500 elem és csak vette 13 milliszekundum teljesíteni. Ez nem befolyásolja az összes 500 kép betöltésének idejét 13 ms automatikus generált rácshoz nagyon lenyűgöző.

Kezdje el magát, ha letölti a fájlokat a GitHubból, és kövesse a telepítési utasításokat. Ez zavarónak érezheti magát, de minél többet szeretne játszani vele, annál könnyebb lesz beállítani.