Rakenna reagoivat lajiteltavat ruudukon asettelut tämän komentosarjan avulla

Mukautetut verkot ovat joitakin vaikeimmista ominaisuuksista, joita luodaan tyhjästä. Löydät paljon muurausverkkoyhteyksiä, mutta ne jokaisella on omat rajoituksensa ja vaatimukset.

Muurin käsikirjoitus on vahva vaihtoehto kaikille lajiteltavat ja reagoivat ruudukon elementit kosketusnäytöllä.

Se on rakennettu Velocity.js animaatioille, kanssa Hammer.js-kirjasto liikkuvan kosketuksen käsittelemiseksi. Muuri ei vaatia jQueryä, joten se on yksi harvoista vanilja-JavaScript-laajennuksista ruudukon rajapintoihin.

Pääprojektisivulla on a kaunis ruudukon demo, jossa kaikki ominaisuudet. Animaatiotehosteet, vedä ja pudota tuki ja erilaiset eri kokoiset verkkoelementit. Tämä demo esittelee, kuinka paljon hallitsette Muuri-ruudulla.

Voit valita mitkä elementit näytetään, luokkien perusteella (eli suodatus) miten haluat täyttää tyhjät tilat.

Muurausverkot jättävät usein tyhjiä paikkoja, koska verkkoelementit eivät aina sovi yhteen täydellisesti. Tämä on melko tyypillistä suuremmille sivustoille, kuten Pinterestille. Vaikka voit lisää vetokelpoisia ruudukko-kohteita melko paljon mitä tahansa käyttäjän ohjaamaa käyttöliittymää.

Ajatella sosiaaliset profiilit, joissa on widgetisoidut asettelut ja miten he toimisivat. Tai ajattele mukautetut tehtävälistat, jotka toimivat progressiivisina web-sovelluksina JavaScriptissä. Muuri-sivulla on todella hieno demo, joka esittelee tehtäväluettelon ja miten se voisi toimia PWA: na mobiililaitteissa.

Pääset alkuun, vain sisältää kaikki JavaScript-riippuvuudet sekä Muurin skriptit. Voit vetää ne läpi npm tai napata kopion GitHub-reposta.

Sitten sinä luo säiliöverkkoelementti ja kohdistaa se uuteen instanssiin Muuri () menetelmä. Se on melko yksinkertainen ja erityisen helppokäyttöinen kopioimalla koodinpätkät GitHub-reposta.

Kanssa täysi tuki kaikille nykyaikaisille selaimille (IE9 +) ja kosketusliittymälle, tämä plugin on yksi parhaista vetämällä ja pudottamalla verkkoon.

Lue lisää lukemalla läpi Muurin kotisivun ja tinkomalla live-esittelyillä. Tämä on hyvä järjestelmä dynaamisille verkkoja varten ja se on edelleen aktiivisessa kehityksessä, joten voit luottaa siihen, että tämä plugin tulee olemaan pitkän matkan varrella.