js-masonry

Js library to lay elements in masonry grid in optimal positions and auto adjust margin between bricks with option to height sort

Usage no npm install needed!

<script type="module">
  import jsMasonry from 'https://cdn.skypack.dev/js-masonry';
</script>

README

Welcome to js-masonry 👋

Version Documentation Maintenance License: MIT Twitter: bktujwol

Vanilla Js library to lay elements in masonry grid in optimal positions and which auto adjusts margin between bricks based on residual space

🏠 Homepage

Install

npm install js-masonry

Script Tag

Dowload and include following file:

js-masonry.js

Options

const mas = new jsMasonry('selector/s',
                                      { 
                                        elSelector: string, 
                                        elWidth:number, 
                                        elMargin:number, 
                                        heightSort:string,
                                        percentWidth:boolean, 
                                        callBack : function
                                        })

First Parameter : one or multple selector to apply masonry. ('Refer to querySelectorAll')

Second Parameter :

elSelector : String, (Optional, Element to be used as base brick default first element)
elWidth : Number, (Optional, Width for bricks, deafult elSelector or first element width )
heightSort:string,('ASC' for ascending height, 'DESC' for descending,do not set for as it is)
elMargin : Number, (Optional, Minimum hotizontal and vertical margin between bricks)
percentWidth : Boolen, (Optional, Use percent width set with CSS, deafult:true, Note: do not use elSelector)
callBack : Function (Optional, Function to call after all bricks are lay which get selected element object as parameter1)



Note 1 : Initialize carousel inside script tag on window onload or footer.
Note 2 : If multiple masnory is layed each will get respective element object as callback parameter.
Note 3 : To apply masonry after adding  bricks apply mas.layBrks(el), where el is object (see querySelector)

Author

👤 ujw0l

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 ujw0l.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator