mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 19:38:20 -07:00
77 lines
1.8 KiB
Plaintext
77 lines
1.8 KiB
Plaintext
|
# Masonry
|
|||
|
|
|
|||
|
|
_Cascading grid layout library_
|
|||
|
|
|
|||
|
|
Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
|
|||
|
|
|
|||
|
|
See [masonry.desandro.com](http://masonry.desandro.com) for complete docs and demos.
|
|||
|
|
|
|||
|
|
## Install
|
|||
|
|
|
|||
|
|
### Download
|
|||
|
|
|
|||
|
|
+ [masonry.pkgd.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.js) un-minified, or
|
|||
|
|
+ [masonry.pkgd.min.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.min.js) minified
|
|||
|
|
|
|||
|
|
### CDN
|
|||
|
|
|
|||
|
|
Link directly to [Masonry files on cdnjs](https://cdnjs.com/libraries/masonry).
|
|||
|
|
|
|||
|
|
``` html
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script>
|
|||
|
|
<!-- or -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Package managers
|
|||
|
|
|
|||
|
|
Bower: `bower install masonry --save`
|
|||
|
|
|
|||
|
|
[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Initialize
|
|||
|
|
|
|||
|
|
With jQuery
|
|||
|
|
|
|||
|
|
``` js
|
|||
|
|
$('.grid').masonry({
|
|||
|
|
// options...
|
|||
|
|
itemSelector: '.grid-item',
|
|||
|
|
columnWidth: 200
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
With vanilla JavaScript
|
|||
|
|
|
|||
|
|
``` js
|
|||
|
|
// vanilla JS
|
|||
|
|
var grid = document.querySelector('.grid');
|
|||
|
|
var msnry = new Masonry( grid, {
|
|||
|
|
// options...
|
|||
|
|
itemSelector: '.grid-item',
|
|||
|
|
columnWidth: 200
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
With HTML
|
|||
|
|
|
|||
|
|
Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`.
|
|||
|
|
|
|||
|
|
``` html
|
|||
|
|
<div class="grid js-masonry"
|
|||
|
|
data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
|
|||
|
|
<div class="grid-item"></div>
|
|||
|
|
<div class="grid-item"></div>
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it.
|
|||
|
|
|
|||
|
|
* * *
|
|||
|
|
|
|||
|
|
Copyright 2015 David DeSandro
|