metafizzy/packery
Packery
Packery ist eine JavaScript-Bibliothek für Bin-Packing-Grid-Layouts und DOM-Elementpositionierung. Sie ordnet Elemente unterschiedlicher Größe in einem lückenlosen, kompakten Raster an, indem sie absolute Koordinaten berechnet und auf HTML-Elemente anwendet, um Überlappungen zu vermeiden.
Die Bibliothek ermöglicht die Erstellung verschiebbarer Raster-Schnittstellen, sodass Benutzer Elemente per Drag-and-Drop neu anordnen können, während das System die verbleibenden Elemente automatisch neu ausrichtet. Sie behält stabile, responsive Layouts über verschiedene Bildschirmdimensionen hinweg bei, indem sie ein prozentbasiertes Positionierungssystem verwendet und auf Fenstergrößenänderungen reagiert.
Das Tool verwaltet die dynamische Inhaltsanordnung durch Funktionen wie die Synchronisation mit Bild- und Schriftladen, die Möglichkeit, Layout-Platz durch Stempel zu reservieren, und die Verwendung von Platzhaltermarkern zur Vorschau von Drop-Positionen während der manuellen Neuanordnung. Es unterstützt zudem gestaffelte Übergänge für die Neupositionierung von Elementen und die Integration externer Rastersysteme für die Spaltenausrichtung.
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.
