metafizzy/packery
Packery
Packery est un moteur de mise en page en grille de type bin-packing JavaScript et une bibliothèque de positionnement d'éléments DOM. Il organise des éléments de tailles variées dans une grille compacte sans espace en calculant et en appliquant des coordonnées absolues aux éléments HTML pour éviter les chevauchements.
La bibliothèque permet la création d'interfaces en grille déplaçables, permettant aux utilisateurs de réorganiser les éléments via drag-and-drop tandis que le système réorganise automatiquement les éléments restants. Elle maintient des mises en page stables et réactives à travers différentes dimensions d'écran en utilisant un système de positionnement basé sur des pourcentages et en répondant aux événements de redimensionnement de fenêtre.
L'outil gère l'agencement de contenu dynamique via des capacités telles que la synchronisation avec le chargement d'images et de polices, la possibilité de réserver de l'espace de mise en page via des stamps, et l'utilisation de marqueurs de remplacement pour prévisualiser les positions de dépôt lors d'une réorganisation manuelle. Il prend également en charge les transitions échelonnées pour le repositionnement des éléments et l'intégration de systèmes de grille externes pour l'alignement des colonnes.
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.
