1.3.8 • Published 4 years ago

@mrbakieness/npm_masonry v1.3.8

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

Masonry CSS & JS

Masonry

Install

npm install @mrbakieness/npm_masonary --save-dev

Useage

To use the module first you have to import the module into your main JavaScript file.

import '../node_modules/@mrbakieness/npm_masonary/main.js';

Example

Once the module has been imported use the follwing to turn a container and its child elements to a masonry layout.

masonary('.container', '.items'); 

Advanceed Example

There are a few options that can be used to customise the masonry layout they are the following:

OptionDescriptionDefault
columnsNumber of columns the layout should use at max screen size.4
marginMargin for each element, so the layout is even. In pixels15
max_widthmaximum width of the layout. In pixels1200

To use these options use the following code.

masonary('.container', '.items', {
    columns: 6,
    margin: 20,
    max_width: 1000
});

Not all options have to be used, you can pick and choose which one or two you want.

To set just a custom margin:

masonary('.container', '.items', {
    margin: 20,
});

To make a 6 column layout with a max width of 1000px but use the default margin property:

masonary('.container', '.items', {
    columns: 6,
    max_width: 1000
});