Bygg Responsive Sorterable Grid Layouts With This Script
Tilpassede rutenett er noen av de tøffeste funksjonene å skape fra bunnen av. Du kan finne mange murstein plugger, men de hver har sine egne begrensninger og krav.
De Muuri script er et sterkt alternativ for alle som trenger sorterbare og responsive gridelementer med berøringsstøtte.
Det er bygget på Velocity.js for animasjonene, sammen med Hammer.js bibliotek for håndtering av mobil berøring. Muuri gjør ikke krever jQuery, så det er en av de få vanilla JavaScript plugins for grid grensesnitt.
På hovedprosjektsiden finner du en vakker grid demo med alle funksjonene. Animasjonseffekter, dra og slipp støtte og forskjellige gridelementer av varierende størrelse. Denne demonstrasjonen viser hvor mye kontroll du har med et Muuri-nett.
Du kan velge hvilke elementer som skal vises, basert på klasser (dvs. filtrering), sammen med hvordan du vil fylle ut tomme mellomrom.
Masonry grids forlater ofte tomme flekker fordi Gitterelementer passer ikke alltid perfekt sammen. Dette er ganske typisk for større nettsteder som Pinterest. Selv om du kan legg til trekkbare rutenettelementer til stort sett alle brukerstyrte grensesnitt.
Tenk om sosiale profiler med widgetized layouts og hvordan de ville fungere. Eller tenk på tilpassede gjøremålslister som kjører som progressive webapper på JavaScript. Det er faktisk en flott demonstrasjon av dette på Muuri-siden som viser en utvalgsoppgave og hvordan den kan fungere som en PWA på mobilen.
For å komme i gang, bare du inkludere alle JavaScript-avhengighetene, sammen med Muuri-skriptene. Du kan trekke dem ned gjennom npm eller ta en kopi fra GitHub repo.
Så, du opprett et beholdergitterelement og mål det med en ny forekomst av Muuri () metode. Det er alt ganske enkelt og spesielt enkelt å bruke ved å kopiere kodestykket fra GitHub repo.
Med full støtte for alle moderne nettlesere (IE9 +) og et berøringsgrensesnitt, denne plugin er en av de beste for dra og slipp grid funksjoner.
Lær mer ved å lese gjennom Muuri hjemmeside og tinker med live demoer. Dette er en flott system for dynamiske grid og dets fortsatt i aktiv utvikling, slik at du kan stole på at dette pluginet kommer til å være rundt for lang tid.
