# pure-masonry-js > Masonry DOM effect with pure JavaScript Latest version **0.2.9** (published 2017-07-04) · MIT license · 0 weekly downloads ## Install ```sh npm install pure-masonry-js pnpm add pure-masonry-js yarn add pure-masonry-js bun add pure-masonry-js ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.9 | | Published | 2017-07-04 | | First published | 2017-06-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Caliberi | | Maintainers | caliberi | | Keywords | masonry, vanillaJS, layout | ## Links - npm: https://www.npmjs.com/package/pure-masonry-js - Repository: https://github.com/caliberi/pure-masonry - Homepage: https://github.com/caliberi/pure-masonry#readme - Issues: https://github.com/caliberi/pure-masonry/issues - npm.io page: https://npm.io/package/pure-masonry-js ## Recent versions - 0.2.9 (latest) — 2017-07-04 - 0.2.8 — 2017-06-29 - 0.2.7 — 2017-06-29 - 0.2.6 — 2017-06-29 - 0.2.5 — 2017-06-28 - 0.2.4 — 2017-06-28 - 0.2.3 — 2017-06-28 - 0.2.2 — 2017-06-28 - 0.2.1 — 2017-06-28 - 0.1.4 — 2017-06-27 - 0.1.3 — 2017-06-27 - 0.1.2 — 2017-06-27 - 0.1.1 — 2017-06-26 ## README # Pure Masonry Masonry DOM effect with pure JavaScript **Installation** ```bash npm install --save-dev pure-masonry ``` **Usage** **1.** Add pureMasonry.js to your project code and init the Plugin like shown below ```html ... your html ... ``` **OR** If you use `webpack` you can do ```javascript let PureMasonry = require('pure-masonry-js'); PureMasonry.init(); ``` **2.** Add a container wall to your html body with bricks inside: (The container's size is under your control, feel free to make it absolute (px) or relative (vw, vh, %).) ```html
...
(more bricks... )
``` **! Important !** if you don't specify the options, then you need to use exact html as shown in the example above. ```html ``` --- **List of options:** By default you get a whole specturm of them, but you can control the options by passing an object as shown above
Option Default Value Comments
container #masonry-wall (String) Accepts a javascript selector, it uses document.querySelectorAll(selector)
width 320 (Integer) Width of bricks. This will apply to all bricks.
horizontal_gutter 5 (Integer) horizontal spacing between bricks
vertical_gutter 5 (Integer) vertical spacing between bricks
responsive true (Boolean) The bricks will be initially built to fit the container, but the resize function will not be called on width change (window)
duration 350ms (String) Trainsition duration, can be 350ms 1s and etc...
easing ease (String) Default transition for css (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)). visit https://www.w3schools.com/css/css3_transitions.asp for info
centered true (Boolean) If you want the content of the masonry to be centered in the container (uses width to cal the needed space for bricks in a row)
*Please write issues, suggestions so this plugin can be improved* --- _Source: https://npm.io/package/pure-masonry-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._