Bygg Responsive Sorterable Grid Layouts With This Script

Anpassade nät är några av de tuffaste funktionerna att skapa från början. Du kan hitta massor av murplattor, men de Var och en har sina egna begränsningar och krav.

De Muuri script är ett starkt alternativ för alla som behöver sorterbara och responsiva nätelement med beröringsstöd.

Det är byggt på Velocity.js för animationerna, tillsammans med Hammer.js bibliotek för hantering av mobil touch. Muuri gör inte kräver jQuery, så det är en av de få vanilj JavaScript plugins för grid gränssnitt.

På huvudprojektsidan hittar du en vacker raster demo med alla funktioner. Animeringseffekter, dra och släpp stöd och olika gallerelement i olika storlekar. Den här demonstrationen visar hur mycket kontroll du har med ett Muuri-galler.

Du kan välja vilka element att visa, baserad på klasser (dvs filtrering) tillsammans med hur du vill fylla i tomma utrymmen.

Masonrynät lämnar ofta tomma fläckar eftersom gallerelementen passar inte alltid perfekt samman. Detta är ganska typiskt för större webbplatser som Pinterest. Även du kan lägg till draggbara rutnät till stort sett alla användarstyrda gränssnitt.

Tänka på sociala profiler med widgetiserade layouter och hur de skulle fungera. Eller tänk på anpassade att göra-listor som körs som progressiva webbapps på JavaScript. Det finns faktiskt en bra demo av detta på Muuri-sidan som visar en prov-att-göra-lista och hur det kan fungera som en PWA på mobilen.

För att komma igång, du bara inkludera alla JavaScript-beroende, tillsammans med Muuri-skripten. Du kan dra dem ner genom npm eller ta en kopia från GitHub repo.

Sen du skapa ett containernätelement och rikta det med en ny instans av Muuri () metod. Det är allt ganska enkelt och speciellt lätt att använda genom att kopiera kodproverna från GitHub repo.

Med fullt stöd för alla moderna webbläsare (IE9 +) och ett touch-enabled gränssnitt, denna plugin är en av de bästa för drag och släpp rutnät funktioner.

Läs mer genom att läsa igenom Muuri hemsida och tinka med levande demos. Det här är en bra system för dynamiska nät och det är det fortfarande i aktiv utveckling, så du kan lita på att det här pluginet kommer att vara runt för lång tid.