repository·master·Indexed 19 days ago
https://github.com/spope/minimasonry.jsA lightweight, dependency-free JavaScript library for creating masonry layouts. Version 1.3.2 uses CSS transforms and GPU acceleration for smooth animations. It includes a configurable API for managing gutters, sorting directions, and layout triggers, with built-in throttled window resize handling.
resize event listener to the window to redraw the masonry layout whenever the window size changes. This listener is throttled to 66ms (approximately 15fps) to ensure performance.Depending on your project setup, include MiniMasonry using a <script> tag for minified builds or an import statement for ESM.
<!-- Using minified version -->
<script src="node_modules/minimasonry/build/minimasonry.min.js"></script>
<!-- Using ESM -->
<script type="module">
import MiniMasonry from "minimasonry";
</script>You can install MiniMasonry via npm, by cloning the repository, or by downloading the build files (minimasonry.min.js or minimasonry.esm.js).
npm install minimasonryTo implement a masonry layout, ensure your HTML structure follows these requirements:
position: relative).position: absolute).Initialize the layout by creating a new instance of MiniMasonry and passing the container selector or element.
var masonry = new MiniMasonry({
container: '.masonry_transition'
});When initializing new MiniMasonry(options), you can pass the following configuration parameters:
| Name | Default | Description |
|---|---|---|
container | null | Required. Container's selector or HTMLElement. |
baseWidth | 255 | Target width of elements (int). |
gutter | 10 | Width/height of gutter between elements (int). |
gutterX | null | Width of gutter between elements. Requires gutterY to work; otherwise falls back to gutter. |
gutterY | null | Height of gutter between elements. Requires gutterX to work; otherwise falls back to gutter. |
minify | true | If true, places elements on the shortest column. If false, keeps exact order of the list. |
surroundingGutter | true | Set left gutter on first columns and right gutter on last. |
ultimateGutter | 5 | Gutter applied when only 1 column can be displayed. |
direction | "ltr" | Sorting direction: "ltr" or "rtl". |
wedge | false | If true, starts from left/right according to direction. If false, starts from center. |
The MiniMasonry instance provides the following methods:
layout(): Triggers a relayout of the masonry if the list of elements has changed.destroy(): Removes the window resize listener and restores the container to its original state.