Luo nopeat muurausruudukon asettelut Bricks.js n avulla

Se on aina ollut melko yksinkertaista luoda ruudukkoja jQuery: n avulla, käyttämällä laajennuksia ja ilmaisia ​​opetusohjelmia kehittäjiltä.

Muurausverkot ovat kuitenkin tiukempia rakentaa, koska ne ovat eivät sovi tasaisesti sivulle. Sinulla on kiinteän kokoiset levyt sarakkeille, mutta kohteen korkeudet voivat vaihdella villisti.

Tehdä pikselin täydellinen muurausverkko tarvitset laajennuksen, kuten Bricks.js.

Tämä plugin on täysin avoimen lähdekoodin ja naurettavan nopea. lyhennys muodosta 'it will' tehdä verkosta alle puolessa sekunnissa, jopa kymmeniä kohteita sivulla.

Useimmat ihmiset tunnistavat muurausverkot Pinterestistä, koska ne ovat suosineet ulkoasua. Mutta sen jälkeen se on kasvanut käytetään monissa muissa sivustoissa, liian.

Aloittaaksesi Bricks.js: n, tarvitset jonkin verran sisältöä ja a oletussivun asettelu. Asennat laajennuksen suoraan npm: stä tai GitHubin kautta, jos se on helpompaa.

Kun olet alustanut, siirryt kolme erityistä parametria:

1. kontti - DOM-konttielementti verkkoon
2. Pakattu - ominaisuus joka määrittää, miten kohteet virtaavat verkkoon
3. koot - joukko leveyksiä ja vesikouruja, määritetty pikseleinä

Lisäosassa käytetään kaikkia näitä arvoja automatisoimalla muurausverkko tyhjästä.

Ja voit jopa käytä sitä ääretön lataus jos haluat muurausverkkoja, jotka toimivat kuten Pinterest.

Tutustu esittelysivulle interaktiivinen verkko voit muuttaa testausta varten. Sinä määritellä elementtien kokonaismäärä ja se automatisoi prosessin näyttämällä koko renderointiajan.

Esimerkiksi testasin ruudukon 500 elementtiä ja se otti vain 13 millisekuntia saada valmiiksi. Tämä ei vaikuta siihen, että kaikki 500 kuvaa ladataan, mutta 13 ms automaattista generoitua verkkoa varten on erittäin vaikuttava.

Aloita itsesi lataamalla tiedostot GitHubista ja noudata asennusohjeita. Tämä saattaa tuntua hämmentävältä aluksi, mutta mitä enemmän leikkii sen kanssa, sitä helpompi on perustaa.