haltu/muuri

Features

• Draggable Layout Elements - Provides a framework for creating UI components that can be manually repositioned within a grid via drag-and-drop.
• Responsive Grid Layouts - Provides a responsive grid layout system that automatically adapts item positions to varying screen sizes and container dimensions.
• Grid Packing Algorithms - Implements algorithms for automatically arranging and compacting grid items to fill empty space and minimize gaps.
• Asynchronous Layout Calculation - Performs complex layout calculations on background threads to ensure smooth animations and no main-thread freezing.
• Web Worker Layout Computation - Offloads heavy coordinate calculations to background web workers to maintain a responsive user interface.
• Cascading Grid Libraries - A JavaScript library specifically designed to create responsive, gapless grids with varying item heights.
• CSS Transform Animations - Uses CSS translate transforms to achieve high-performance animations during grid layout shifts.
• Drag and Drop Libraries - Provides a library for implementing drag-and-drop interactions to detect gestures and trigger grid reordering.
• Drag and Drop Interactions - Implements logic and constraints for manually reordering elements or moving them between containers via drag-and-drop.
• Nested Grid Structures - Supports embedding full grid instances within other grid cells to create hierarchical layout structures.
• Layout Animation Engines - Implements a layout-aware animation engine that smoothly transitions elements between different positions and visibility states.
• Pointer Event Handlers - Manages raw pointer, touch, and mouse events to track movement and trigger grid reordering.
• Background Layout Engines - Uses a background-threaded engine to calculate grid coordinates, ensuring the main interface remains responsive.
• Main Thread Offloading - Offloads heavy grid coordinate calculations to background web workers to maintain interface responsiveness.
• UI Element Sorting - Implements ordering logic for visual DOM elements using custom comparison functions.
• CSS Class-Based Visibility Toggling - Provides a system to toggle item visibility using CSS classes combined with smooth animated transitions.
• Multi-Container Drag and Drop - Allows moving items between separate grids with reordering capabilities across multiple containers.
• Dynamic Layout Filtering - Provides layouts that can show or hide items based on specific criteria with smooth animated transitions.
• Cross-Container Transfers - Enables moving elements across different grids with integrated auto-scrolling during the transfer process.
• Interactive Element Sorting - Allows user-driven reordering of grid elements via direct manipulation to define a specific sequence.
• Custom Sort Comparators - Provides the ability to define custom comparison functions for sorting grid items.
• Filtered Grid Reordering - Hides or reorders items based on specific criteria and animates the transition to the new layout.
• Visibility Toggles - Implements mechanisms for toggling the visibility of grid components while preserving their layout state.
• Off-Main-Thread Layouts - Maintains interface responsiveness during large rearrangements by managing complex grid calculations off the main thread.

Star history