### Install MiniMasonry via NPM Source: https://github.com/spope/minimasonry.js/blob/master/README.md The command to install the MiniMasonry package into your project using the Node Package Manager. ```shell npm install minimasonry ``` -------------------------------- ### Complete HTML/CSS Setup Source: https://context7.com/spope/minimasonry.js/llms.txt Provides the essential HTML structure and CSS styles required for MiniMasonry.js to function, emphasizing relative positioning for the container and absolute positioning for items. ```APIDOC ## Complete HTML/CSS Setup ### Description Demonstrates the required HTML structure and CSS styles for MiniMasonry to function correctly. The container must be relatively positioned, and children must be absolutely positioned. ### Method Setup ### Endpoint N/A ### Request Example ```html

``` ``` -------------------------------- ### Layout Direction and Wedge Source: https://context7.com/spope/minimasonry.js/llms.txt Configures the horizontal direction ('ltr' or 'rtl') and the starting position ('wedge') for element placement, useful for different language layouts. ```APIDOC ## direction and wedge ### Description Controls the horizontal direction and starting position of the layout. Direction can be 'ltr' (left-to-right) or 'rtl' (right-to-left). Wedge determines whether to start from center (false) or edge (true) when there are fewer items than columns. ### Method Initialization ### Endpoint N/A (Configuration Option) ### Parameters #### Query Parameters - **direction** (string) - Optional - Layout direction. Accepts 'ltr' or 'rtl'. Defaults to 'ltr'. - **wedge** (boolean) - Optional - If true, starts layout from the edge; if false, centers the layout. Defaults to false. ### Request Example ```javascript // Right-to-left layout for RTL languages var rtlMasonry = new MiniMasonry({ container: '.gallery', direction: 'rtl' }); // Start from left edge instead of centering var wedgedMasonry = new MiniMasonry({ container: '.gallery', direction: 'ltr', wedge: true }); ``` ``` -------------------------------- ### ES Module Usage Source: https://context7.com/spope/minimasonry.js/llms.txt Illustrates how to import and utilize MiniMasonry.js as an ES module in modern JavaScript projects, including examples for vanilla JavaScript and React. ```APIDOC ## ES Module Usage ### Description Shows how to import and use MiniMasonry as an ES module in modern JavaScript applications and bundled projects. ### Method Initialization ### Endpoint N/A ### Request Example ```javascript // Import as ES module import MiniMasonry from 'minimasonry'; // Initialize masonry const masonry = new MiniMasonry({ container: document.querySelector('.gallery'), baseWidth: 300, gutter: 20 }); // React component example import { useEffect, useRef } from 'react'; import MiniMasonry from 'minimasonry'; function MasonryGallery({ items }) { const containerRef = useRef(null); const masonryRef = useRef(null); useEffect(() => { masonryRef.current = new MiniMasonry({ container: containerRef.current, baseWidth: 250, gutter: 12 }); return () => { masonryRef.current.destroy(); }; }, []); useEffect(() => { if (masonryRef.current) { masonryRef.current.layout(); } }, [items]); return (

{items.map(item => (

))}

); } ``` ``` -------------------------------- ### Set Layout Direction and Alignment Source: https://context7.com/spope/minimasonry.js/llms.txt Configures the horizontal flow of the masonry grid using the direction property and adjusts starting alignment with the wedge property. ```javascript // Right-to-left layout for RTL languages var rtlMasonry = new MiniMasonry({ container: '.gallery', direction: 'rtl' }); // Start from left edge instead of centering var wedgedMasonry = new MiniMasonry({ container: '.gallery', direction: 'ltr', wedge: true }); ``` -------------------------------- ### Initialize MiniMasonry Instance Source: https://context7.com/spope/minimasonry.js/llms.txt Demonstrates how to instantiate the MiniMasonry class using either a CSS selector or an HTMLElement. It also showcases the full configuration object for customizing grid behavior such as gutter size, direction, and base width. ```javascript var masonry = new MiniMasonry({ container: '.grid-container' }); var element = document.getElementById('masonry-grid'); var masonry = new MiniMasonry({ container: element }); var masonry = new MiniMasonry({ container: '.gallery', baseWidth: 300, gutter: 15, gutterX: 20, gutterY: 10, minify: true, surroundingGutter: true, ultimateGutter: 5, direction: 'ltr', wedge: false }); ``` -------------------------------- ### Configure Layout Spacing with Gutters Source: https://context7.com/spope/minimasonry.js/llms.txt Demonstrates how to control spacing between elements using the gutter property for uniform gaps or gutterX/gutterY for specific horizontal and vertical spacing. ```javascript // Uniform 20px gaps var masonry = new MiniMasonry({ container: '.gallery', gutter: 20 }); // Different horizontal and vertical gaps var masonry = new MiniMasonry({ container: '.gallery', gutterX: 30, gutterY: 15 }); ``` -------------------------------- ### Constructor - Initialize MiniMasonry Source: https://context7.com/spope/minimasonry.js/llms.txt Creates a new instance of MiniMasonry to manage a responsive grid layout within a specified container. ```APIDOC ## Constructor ### Description Initializes a new MiniMasonry instance. It calculates initial element positions and attaches a throttled resize listener to the window. ### Parameters #### Options Object - **container** (string|HTMLElement) - Required - CSS selector or DOM element for the grid container. - **baseWidth** (number) - Optional - Target width for each element (default: 255). - **gutter** (number) - Optional - Gap between elements (default: 10). - **minify** (boolean) - Optional - Place items in the shortest column (default: true). - **direction** (string) - Optional - Sorting direction: 'ltr' or 'rtl' (default: 'ltr'). ### Request Example var masonry = new MiniMasonry({ container: '.grid-container', baseWidth: 300, gutter: 15 }); ``` -------------------------------- ### Implement HTML and CSS for MiniMasonry Source: https://context7.com/spope/minimasonry.js/llms.txt Provides the required container and item CSS positioning rules and a basic initialization script for a standard web page. ```html

``` -------------------------------- ### Configure Outer and Responsive Gutters Source: https://context7.com/spope/minimasonry.js/llms.txt Manages gutter space on container edges with surroundingGutter and defines specific spacing for single-column views using ultimateGutter. ```javascript // No outer gutters - elements touch container edges var masonry = new MiniMasonry({ container: '.gallery', surroundingGutter: false }); // Custom single-column gutter for mobile var masonry = new MiniMasonry({ container: '.gallery', gutter: 20, ultimateGutter: 10 }); ``` -------------------------------- ### Configure Base Width Source: https://context7.com/spope/minimasonry.js/llms.txt Illustrates how to set the baseWidth property to control the target width of grid items. This setting dictates the responsiveness and column count of the masonry layout. ```javascript var thumbnailGrid = new MiniMasonry({ container: '.thumbnails', baseWidth: 150 }); var cardGrid = new MiniMasonry({ container: '.cards', baseWidth: 350 }); ``` -------------------------------- ### Initialize MiniMasonry Instance Source: https://github.com/spope/minimasonry.js/blob/master/README.md Basic instantiation of the MiniMasonry class, requiring a container selector to manage the layout of child elements. ```javascript var masonry = new MiniMasonry({ container: '.masonry_transition' }); ``` -------------------------------- ### Control Layout Minification and Ordering Source: https://context7.com/spope/minimasonry.js/llms.txt Shows how to toggle the minify property to either fill the shortest column (default) or maintain the original DOM order of elements. ```javascript // Minified layout - fills shortest column first (default) var masonry = new MiniMasonry({ container: '.gallery', minify: true }); // Sequential layout - maintains element order var masonry = new MiniMasonry({ container: '.gallery', minify: false }); ``` -------------------------------- ### Integrate as ES Module and React Component Source: https://context7.com/spope/minimasonry.js/llms.txt Demonstrates importing MiniMasonry as an ES module and wrapping it within a React component using hooks for lifecycle management. ```javascript import MiniMasonry from 'minimasonry'; // Initialize masonry const masonry = new MiniMasonry({ container: document.querySelector('.gallery'), baseWidth: 300, gutter: 20 }); // React component example import { useEffect, useRef } from 'react'; function MasonryGallery({ items }) { const containerRef = useRef(null); const masonryRef = useRef(null); useEffect(() => { masonryRef.current = new MiniMasonry({ container: containerRef.current, baseWidth: 250, gutter: 12 }); return () => { masonryRef.current.destroy(); }; }, []); useEffect(() => { if (masonryRef.current) { masonryRef.current.layout(); } }, [items]); return (

{items.map(item => (

))}

); } ``` -------------------------------- ### Include MiniMasonry in HTML or ESM Source: https://github.com/spope/minimasonry.js/blob/master/README.md Methods for importing the library into a project, either via a script tag for browser environments or as an ES module. ```html ``` ```javascript import MiniMasonry from "minimasonry"; ``` -------------------------------- ### Trigger Layout Recalculation Source: https://context7.com/spope/minimasonry.js/llms.txt Explains how to manually trigger a grid recalculation using the layout() method. This is essential after adding or removing DOM elements or when images finish loading to ensure correct positioning. ```javascript var masonry = new MiniMasonry({ container: '.gallery' }); var newItem = document.createElement('div'); newItem.className = 'gallery-item'; newItem.innerHTML = ' New image

'; document.querySelector('.gallery').appendChild(newItem); masonry.layout(); var images = document.querySelectorAll('.gallery img'); var loadedCount = 0; images.forEach(function(img) { if (img.complete) { loadedCount++; } else { img.addEventListener('load', function() { loadedCount++; if (loadedCount === images.length) { masonry.layout(); } }); } }); document.querySelector('.gallery-item').remove(); masonry.layout(); ``` -------------------------------- ### layout() - Refresh Grid Source: https://context7.com/spope/minimasonry.js/llms.txt Triggers a recalculation and repositioning of all elements within the masonry container. ```APIDOC ## layout() ### Description Forces the library to recompute column counts, element widths, and positions. This should be called whenever the DOM structure of the container changes (e.g., adding/removing items or loading images). ### Method Instance Method ### Request Example // Add new items dynamically var newItem = document.createElement('div'); document.querySelector('.gallery').appendChild(newItem); // Trigger relayout masonry.layout(); ``` -------------------------------- ### Layout Minification Source: https://context7.com/spope/minimasonry.js/llms.txt Determines how elements are placed. `minify: true` (default) places elements in the shortest column to minimize height, while `minify: false` maintains DOM order across columns. ```APIDOC ## minify ### Description When true (default), elements are placed in the shortest column to minimize overall height. When false, elements maintain their DOM order across columns. ### Method Initialization ### Endpoint N/A (Configuration Option) ### Parameters #### Query Parameters - **minify** (boolean) - Optional - If true, fills the shortest column first. Defaults to true. ### Request Example ```javascript // Minified layout - fills shortest column first (default) var masonry = new MiniMasonry({ container: '.gallery', minify: true }); // Sequential layout - maintains element order var masonry = new MiniMasonry({ container: '.gallery', minify: false }); ``` ``` -------------------------------- ### Surrounding and Ultimate Gutter Source: https://context7.com/spope/minimasonry.js/llms.txt Manages outer gutter spacing with `surroundingGutter` and defines a specific gutter for single-column views with `ultimateGutter`. ```APIDOC ## surroundingGutter and ultimateGutter ### Description `surroundingGutter` adds gutter space on the outer edges of the grid. `ultimateGutter` specifies a different gutter value used when only one column is displayed (typically on narrow screens). ### Method Initialization ### Endpoint N/A (Configuration Option) ### Parameters #### Query Parameters - **surroundingGutter** (boolean) - Optional - If true, adds gutter space around the grid. Defaults to true. - **ultimateGutter** (number) - Optional - A specific gutter value for single-column layouts. ### Request Example ```javascript // No outer gutters - elements touch container edges var masonry = new MiniMasonry({ container: '.gallery', surroundingGutter: false }); // Custom single-column gutter for mobile var masonry = new MiniMasonry({ container: '.gallery', gutter: 20, ultimateGutter: 10 // Smaller gap on single-column mobile view }); ``` ``` -------------------------------- ### Gutter Configuration Source: https://context7.com/spope/minimasonry.js/llms.txt Controls the spacing between elements in the masonry layout. You can set a uniform gutter or different horizontal and vertical gutters. ```APIDOC ## Gutter, gutterX, gutterY ### Description Controls the spacing between elements. Use `gutter` for uniform spacing, or `gutterX` and `gutterY` together for different horizontal and vertical gaps. ### Method Initialization ### Endpoint N/A (Configuration Option) ### Parameters #### Query Parameters - **gutter** (number) - Optional - Uniform gap in pixels. - **gutterX** (number) - Optional - Horizontal gap in pixels. - **gutterY** (number) - Optional - Vertical gap in pixels. ### Request Example ```javascript // Uniform 20px gaps var masonry = new MiniMasonry({ container: '.gallery', gutter: 20 }); // Different horizontal and vertical gaps var masonry = new MiniMasonry({ container: '.gallery', gutterX: 30, // Horizontal gap gutterY: 15 // Vertical gap }); ``` ``` -------------------------------- ### Destroy and Cleanup Instance Source: https://context7.com/spope/minimasonry.js/llms.txt Shows how to properly dispose of a MiniMasonry instance. The destroy() method removes event listeners and clears inline styles, which is critical for memory management and re-initialization. ```javascript var masonry = new MiniMasonry({ container: '.gallery' }); masonry.destroy(); function updateMasonrySettings(newBaseWidth) { masonry.destroy(); masonry = new MiniMasonry({ container: '.gallery', baseWidth: newBaseWidth }); } window.addEventListener('beforeunload', function() { masonry.destroy(); }); ``` -------------------------------- ### destroy() - Cleanup Source: https://context7.com/spope/minimasonry.js/llms.txt Removes event listeners and cleans up inline styles applied by the library. ```APIDOC ## destroy() ### Description Removes the window resize event listener and strips all inline styles (width, transform, height) from the container and its children. Essential for memory management and re-initialization. ### Method Instance Method ### Request Example // Clean up when component unmounts masonry.destroy(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.