─────┬─ ───┼─────┬ ── ─
╭────┬───┬──╮╭──────╮╭──────╮╭──────╮╭────┬─╮╭───┬──╮╭───╮╭─╮ ╭────╮ ─┼─────┴ ────┼──
│ │├──── ││ ────┤│ ╭╮ ││ ││ ││ ││ │ ╭──╯ ╰──╮
│ ╭╮ ╭╮ ││ ╭╮ ││ ││ ││ ││ ╭╮ ││ ╭─╯│ ╰╯ │ │ ─┼─ │ ─┬─────┬─ ┼──
│ ││ ││ ││ ╰╯ │├──── ││ ╰╯ ││ ││ ││ │ ├──── │ ╰──╮ ╭──╯ ┼─ ───┼─── ─
╰───╯╰──╯╰──╯╰───┴──╯╰──────╯╰──────╯╰───╯╰─╯╰────╯ ╰──────╯ ╰────╯ ┼─────┼──
───┴─ ──┴─── ─┴ ─
Extends the masonry plugin by David DeSandro to filter and shuffle items.
See it in action @ PyroCMS Cheatsheet
Bower
Bower install masonry-plus
Node
npm install masonry-plus
Vanilla JavaScript
var masonry = new Masonry( '.grid', {'itemSelector': '.column'});
// layout a filtered list of items with 'data-filter' attribute is set to 'books'
masonry.layout({filter:'books'});
// shuffle the list of items
masonry.layout({shuffle:true});
// show all items
masonry.layout({filter:'*'});
jQuery
// layout a filtered list of items with 'data-filter' attribute is set to 'books'
$('.grid').masonry('layout', {filter:'books'})
// combine filter and shuffle
$('.grid').masonry('layout', {filter:'books', shuffle:true})
Need help or have a question? post at StackOverflow.
Please don't use the issue trackers for support/questions.
Star if you find this project useful, to show support or simply for being awesome :)
Contributions to this project are accepted in the form of feedback, bugs reports and even better - pull requests.
MIT license Copyright (c) Web Semantics, Inc.