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. |
||||
|
||||
For complete docs and demos, see [masonry.desandro.com](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy, |
||||
See [isotopejs.com](http://isotopejs.com) for complete docs and demos. |
||||
|
||||
## 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) |
||||
+ [masonry.pkgd.js](http://masonry.desandro.com/masonry.pkgd.js) |
||||
TBD |
||||
|
||||
### 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 |
||||
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 |
||||
|
||||
### In JavaScript |
||||
|
||||
``` js |
||||
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... |
||||
itemSelector: '.item', |
||||
columnWidth: 200 |
||||
masonry: { |
||||
columnWidth: 200 |
||||
} |
||||
}); |
||||
``` |
||||
|
||||
### 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 |
||||
<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> |
||||
``` |
||||
|
||||
## License |
||||
|
||||
Masonry is licensed MIT. Have at it. |
||||
|
||||
* * * |
||||
|
||||
Copyright (c) 2013 David DeSandro |
||||
Copyright (c) 2013 Metafizzy |
||||
|
@ -1,19 +1,24 @@
|
||||
## to do |
||||
|
||||
insert method |
||||
|
||||
provide nice error if getText doesn't provide an element |
||||
|
||||
move munge sorter to separate file? |
||||
|
||||
## tests |
||||
|
||||
filter |
||||
|
||||
updateSortData |
||||
|
||||
|
||||
layoutComplete test after |
||||
filter - hide some |
||||
filter - reveal some, some stay hidden, some are revealed, some do nothing |
||||
sort |
||||
filter, during transition filter again |
||||
|
||||
provide nice error if getText doesn't provide an element |
||||
|
||||
move munge sorter to separate file? |
||||
|
||||
## bugs |
||||
|
Loading…
Reference in new issue