mirror of https://github.com/metafizzy/isotope
2 changed files with 41 additions and 21 deletions
@ -1,55 +1,70 @@ |
|||||||
# Masonry |
# Isotope |
||||||
|
|
||||||
_Cascading grid layout library_ |
_Filter and sort magical layouts_ |
||||||
|
|
||||||
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 [isotopejs.com](http://isotopejs.com) for complete docs and demos. |
||||||
|
|
||||||
For complete docs and demos, see [masonry.desandro.com](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy, |
|
||||||
|
|
||||||
## Install |
## Install |
||||||
|
|
||||||
A packaged source file includes everything you need to use Masonry. |
A packaged source file includes everything you need to use Isotope. |
||||||
|
|
||||||
+ [masonry.pkgd.min.js](http://masonry.desandro.com/masonry.pkgd.min.js) |
TBD |
||||||
+ [masonry.pkgd.js](http://masonry.desandro.com/masonry.pkgd.js) |
|
||||||
|
|
||||||
### Bower |
### Bower |
||||||
|
|
||||||
If you are cool with the command line, install Masonry as a [Bower](http://bower.io) package: |
If you are cool with the command line, install Isotope as a [Bower](http://bower.io) package: |
||||||
|
|
||||||
``` bash |
``` bash |
||||||
bower install masonry |
bower install isotope |
||||||
``` |
``` |
||||||
|
|
||||||
|
## Isotope |
||||||
|
|
||||||
|
Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. |
||||||
|
|
||||||
|
http://isotope.metafizzy.co/license.html |
||||||
|
|
||||||
|
For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the [GPL v3 License](http://choosealicense.com/licenses/gpl-v3/). You may use Isotope for free. |
||||||
|
|
||||||
## Initialize |
## Initialize |
||||||
|
|
||||||
### In JavaScript |
### In JavaScript |
||||||
|
|
||||||
``` js |
``` js |
||||||
var container = document.querySelector('#container'); |
var container = document.querySelector('#container'); |
||||||
var msnry = new Masonry( container, { |
var iso = new Isotope( container, { |
||||||
|
// options... |
||||||
|
itemSelector: '.item', |
||||||
|
masonry: { |
||||||
|
columnWidth: 200 |
||||||
|
} |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
Or with jQuery |
||||||
|
|
||||||
|
``` js |
||||||
|
$('#container').isotope({ |
||||||
// options... |
// options... |
||||||
itemSelector: '.item', |
itemSelector: '.item', |
||||||
columnWidth: 200 |
masonry: { |
||||||
|
columnWidth: 200 |
||||||
|
} |
||||||
}); |
}); |
||||||
``` |
``` |
||||||
|
|
||||||
### In HTML |
### In HTML |
||||||
|
|
||||||
Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`. |
Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`. |
||||||
|
|
||||||
``` html |
``` html |
||||||
<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'> |
<div class="js-isotope" data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'> |
||||||
<div class="item"></div> |
<div class="item"></div> |
||||||
<div class="item"></div> |
<div class="item"></div> |
||||||
... |
... |
||||||
</div> |
</div> |
||||||
``` |
``` |
||||||
|
|
||||||
## License |
|
||||||
|
|
||||||
Masonry is licensed MIT. Have at it. |
|
||||||
|
|
||||||
* * * |
* * * |
||||||
|
|
||||||
Copyright (c) 2013 David DeSandro |
Copyright (c) 2013 Metafizzy |
||||||
|
@ -1,19 +1,24 @@ |
|||||||
## to do |
## to do |
||||||
|
|
||||||
|
insert method |
||||||
|
|
||||||
|
provide nice error if getText doesn't provide an element |
||||||
|
|
||||||
|
move munge sorter to separate file? |
||||||
|
|
||||||
## tests |
## tests |
||||||
|
|
||||||
filter |
filter |
||||||
|
|
||||||
updateSortData |
updateSortData |
||||||
|
|
||||||
|
|
||||||
layoutComplete test after |
layoutComplete test after |
||||||
filter - hide some |
filter - hide some |
||||||
filter - reveal some, some stay hidden, some are revealed, some do nothing |
filter - reveal some, some stay hidden, some are revealed, some do nothing |
||||||
sort |
sort |
||||||
filter, during transition filter again |
filter, during transition filter again |
||||||
|
|
||||||
provide nice error if getText doesn't provide an element |
|
||||||
|
|
||||||
move munge sorter to separate file? |
|
||||||
|
|
||||||
## bugs |
## bugs |
||||||
|
Loading…
Reference in new issue