https://github.com/ujw0l/js-masonry
Vanilla Js library to lay elements in masonry grid in optimal positions
https://github.com/ujw0l/js-masonry
grid-layout js-masonry lay-elements masonry masonry-grid optimal-positions ujw0l vanilla-js-library
Last synced: 6 months ago
JSON representation
Vanilla Js library to lay elements in masonry grid in optimal positions
- Host: GitHub
- URL: https://github.com/ujw0l/js-masonry
- Owner: ujw0l
- Created: 2019-10-03T02:10:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-20T03:05:54.000Z (about 5 years ago)
- Last Synced: 2025-03-07T01:26:18.731Z (7 months ago)
- Topics: grid-layout, js-masonry, lay-elements, masonry, masonry-grid, optimal-positions, ujw0l, vanilla-js-library
- Language: JavaScript
- Homepage: http://ujw0l.github.io/js-masonry
- Size: 19.5 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
Welcome to js-masonry 👋
> Vanilla Js library to lay elements in masonry grid in optimal positions and which auto adjusts margin between bricks based on residual space
### 🏠 [Homepage](https://ujw0l.github.io/js-masonry)
## Install
```sh
npm install js-masonry
```
## Script Tag
```sh
Dowload and include following file:
js-masonry.js
```
## Options
```sh
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**
* Twitter: [@bktujwol](https://twitter.com/BastakotiUjwol)
* Github: [@ujw0l](https://github.com/ujw0l)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/ujw0l/js-masonry/issues).
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2019 [ujw0l](https://github.com/ujw0l).
This project is [MIT](https://github.com/ujw0l/js-masonry/blob/master/LICENSE) licensed.
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_