Bouw Responsive Sortable Grid Layouts met dit script

Aangepaste grids zijn enkele van de moeilijkste functies om vanaf nul te creëren. U kunt veel metselwerk-plug-ins vinden, maar zij elk heeft zijn eigen beperkingen en vereisten.

De Muuri-script is een sterk alternatief voor iedereen die het nodig heeft sorteerbare en responsieve rasterelementen met touch-ondersteuning.

Het is gebouwd op Velocity.js voor de animaties, samen met de Hammer.js-bibliotheek voor omgaan met mobiel aanraken. Muuri doet niet vereisen jQuery, dus het is een van de weinige JavaScript-plugins met vanilla voor rasterinterfaces.

Op de hoofdprojectpagina vindt u een mooie rasterdemo met alle functies. Animatie-effecten, ondersteuning voor slepen en neerzetten en verschillende rasterelementen van verschillende grootten. Deze demo laat zien hoeveel controle je hebt over een Muuri-raster.

Je kan kiezen welke elementen moeten worden weergegeven, gebaseerd op klassen (dat wil zeggen filteren), samen met hoe je lege ruimtes wilt invullen.

Roosters voor metselwerk verlaten vaak lege plekken omdat het rasterelementen passen niet altijd perfect bij elkaar. Dit is vrij typisch voor grotere websites zoals Pinterest. Hoewel, dat kan voeg dragbare rasteritems toe voor vrijwel elke door de gebruiker gestuurde interface.

Denk aan sociale profielen met widgetized lay-outs en hoe ze zouden werken. Of denk erover na aangepaste taaklijsten die worden weergegeven als progressieve web-apps op JavaScript. Er is eigenlijk een geweldige demo hiervan op de Muuri-pagina met een voorbeeld-takenlijst en hoe het zou kunnen werken als een PWA op mobiel.

Om te beginnen, jij gewoon omvatten alle JavaScript-afhankelijkheden, samen met de Muuri-scripts. Je kunt ze door npm slepen of een kopie van de GitHub-repro pakken.

Dan jij maak een containerrasterelement en target dat met een nieuw exemplaar van de Muuri () methode. Het is allemaal vrij eenvoudig en vooral gemakkelijk te gebruiken door de codefragmenten van de GitHub-repo te kopiëren.

Met volledige ondersteuning voor alle moderne browsers (IE9 +) en een aanraakinterface, deze plug-in is een van de beste functies voor slepen en neerzetten.

Lees meer door de Muuri-homepage te lezen en te knutselen met de live demo's. Dit is een geweldig systeem voor dynamische rasters en zijn nog steeds in actieve ontwikkeling, dus je kunt erop vertrouwen dat deze plug-in voor de lange termijn zal zijn.