─────┬─ ───┼─────┬   ── ─
╭────┬───┬──╮╭──────╮╭──────╮╭──────╮╭────┬─╮╭───┬──╮╭───╮╭─╮      ╭────╮        ─┼─────┴ ────┼──
│           │├────  ││  ────┤│   ╭╮ ││      ││      ││   ││ │   ╭──╯    ╰──╮     
│   ╭╮  ╭╮  ││ ╭╮   ││      ││   ││ ││   ╭╮ ││    ╭─╯│   ╰╯ │   │    ─┼─   │   ─┬─────┬─         ┼──
│   ││  ││  ││ ╰╯   │├────  ││   ╰╯ ││   ││ ││    │  ├────  │   ╰──╮    ╭──╯    ┼─ ───┼─── ─   
╰───╯╰──╯╰──╯╰───┴──╯╰──────╯╰──────╯╰───╯╰─╯╰────╯  ╰──────╯      ╰────╯                     ┼─────┼──
                                                                           ───┴─            ──┴─── ─┴ ─

Extends the masonry plugin by David DeSandro to filter and shuffle items.

See it in action @ PyroCMS Cheatsheet

Install

Bower

Bower install masonry-plus

Node

npm install masonry-plus

Usage

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})

Support

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 :)

Contribution

Contributions to this project are accepted in the form of feedback, bugs reports and even better - pull requests.

License

MIT license Copyright (c) Web Semantics, Inc.