metafizzy/packery
Packery
Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of varying sizes into a gapless, compact grid by calculating and applying absolute coordinates to HTML elements to prevent overlapping.
The library enables the creation of draggable grid interfaces, allowing users to rearrange elements via drag-and-drop while the system automatically reflows the remaining items. It maintains stable, responsive layouts across different screen dimensions by using a percentage-based positioning system and responding to window resize events.
The tool manages dynamic content arrangement through capabilities such as synchronization with image and font loading, the ability to reserve layout space via stamps, and the use of placeholder markers to preview drop positions during manual rearrangement. It also supports staggered transitions for repositioning elements and the integration of external grid systems for column alignment.
Features
- Grid Packing Algorithms - Provides a bin-packing algorithm to automatically arrange elements of varying sizes into a compact, gapless grid.
- Masonry Layouts - Implements a bin-packing grid layout that maintains a stable, gapless structure across different screen dimensions using percentage-based positioning.
- Grid Drag-and-Drop Managers - Enables manual element dragging within a layout while automatically reflowing surrounding items to maintain a gapless grid.
- Percentage-Based Position Calculators - Calculates coordinates in percentage values to maintain layout stability across different browser window dimensions.
- Element Positioning - Calculates and applies absolute coordinates to HTML elements to create seamless, non-overlapping arrangements.
- Percentage-Based Positioning - Tracks item positions and dimensions as relative percentages to ensure layout stability during window resizing.
- Grid Layout Engines - Acts as a JavaScript engine that arranges elements of varying sizes into a gapless, compact grid layout.
- Item Positioning - Enables manual movement of items within the grid while the engine automatically reflows other elements.
- Grid Layout Management - Coordinates the adding, removing, and re-indexing of elements to synchronize the grid layout with the DOM.
- Dynamic Grid Layouts - Organizes collections of items with unpredictable dimensions, such as images or text blocks, into a seamless visual layout.
- Draggable Grid Widgets - Provides a multi-column grid system where users can reposition elements via drag-and-drop with automatic layout reflow.
- Grid Element Arrangement - Positions items in a gapless, bin-packed layout and refreshes the arrangement when item sizes change.
- Screen Percentage Layouts - Uses percentage-based sizes and positions to maintain the grid structure across different screen dimensions.
- Image-Load Layout Synchronization - Recalculates the layout after images load to prevent overlapping elements caused by unknown image dimensions.
- Absolute Positioning - Implements absolute coordinate calculations to position elements and eliminate gaps in a bin-packed grid.
- Layout Reflow Logic - Shifts layout items vertically to accommodate changes while maintaining their original horizontal order.
- Dynamic Reflow Grid Builders - Recalculates element coordinates in real time during drag or resize operations to maintain a gapless structure.
- Drag-and-Drop Layout Reflow - Moves grid elements via drag-and-drop and automatically repositions other items to maintain a gapless layout.
- Viewport Resize Handling - Automatically recalculates item sizes and positions when the browser window is resized to maintain layout stability.
- Drop Position Placeholders - Renders a temporary visual marker at the calculated destination coordinate during drag-and-drop operations.
- Grid Alignment Systems - Constrains items to specific column widths and row heights for consistent alignment during placement and dragging.
- Grid Alignment Systems - Constrains elements to specific column widths and row heights to ensure a consistent visual grid alignment.
- Grid Gutters - Implements fixed or responsive horizontal and vertical gutters between items to prevent them from touching.
- Directional Layout Flows - Allows setting the layout origin point to determine the direction in which elements are placed.
- Drop Position Previews - Displays a placeholder element at the predicted destination of a dragged item before it is released.
- Static Space Reservation - Provides the ability to mark elements as stamps that the layout engine avoids, reserving specific areas for static content.
- Deferred Dimension Refresh - Recalculates the grid layout after images have loaded to prevent element overlap caused by unknown dimensions.
- Staggered Animations - Delays the movement of items incrementally to create a sequenced visual flow during layout updates.
- Grid Layout Systems - Integrates with external CSS grid frameworks to create responsive layouts based on specific column widths.
- Responsive Dashboards - Builds flexible grid systems using percentage-based positioning to maintain structure across different screen sizes.
- Grid Element Distribution - Controls the placement of items within the grid using either a specified intelligent order or a random organic distribution.
