desandro/masonry

Features

• Cascading Grid Layouts - Positions elements of varying heights to eliminate vertical gaps using custom column widths and gutters.
• Fluid Percentage Grids - Provides a layout system using relative percentage widths to automatically resize the grid based on the browser window.
• Grid-DOM Synchronization - Tracks the addition and removal of child elements to maintain a consistent mapping between the DOM and the grid.
• Cascading Grid Libraries - Provides a specialized framework for arranging elements of varying heights into a gapless grid.
• Coordinate-Based Position Calculators - Calculates spatial coordinates for element insertion relative to other components to eliminate vertical gaps.
• Content-Driven Layout Refresh - Triggers layout updates after images or web fonts load to ensure correct element positioning.
• Column-Based Responsive Grids - Uses column-based responsive grids that automatically reflow elements to fit different viewport dimensions.
• Grid Layout Management - Recalculates grid positions after images load or browser windows resize to prevent element overlap.
• Absolute Positioning - Implements precise X and Y coordinate calculations to eliminate vertical gaps between elements of varying heights.
• Layout Recalculation Triggers - Triggers positioning updates in response to external events such as image loading or window resizing.
• Grid Membership Synchronization - Supports adding, removing, or inserting new elements to keep the layout synchronized with the DOM.
• Viewport Resize Handling - Automatically recalculates element sizes and positions when the browser window dimensions change.
• DOM Element Manipulators - Programmatically calculates and applies absolute coordinates to place HTML elements within the browser DOM.
• Element Transitioning Mechanisms - Provides mechanisms to animate the transition of elements into their calculated grid positions.
• Directional Layout Flows - Determines the placement sequence of items based on defined directional flows like top-down or left-to-right.
• Flow Layouts - Positions elements sequentially and manages the starting point and direction of the grid flow.
• Static Space Reservation - Places static elements into the grid so that floating items are positioned around them.
• Layout Event Listeners - Implements event listeners that execute custom functions whenever specific layout changes occur.
• Staggered Grid Column Counts - Adjusts the number of grid columns at runtime while supporting items of different heights.
• Staggered Animations - Masonry.js ability to stagger the movement of elements to make them transition incrementally rather than simultaneously.
• View Transition Animations - Interpolates the positions of grid elements when transitioning between different layout calculations.

Star history