---
layout: default
title: jQuery Shuffle Plugin
bodyClass: home
extraJS: [ "homepage.js" ]
---
< header class = "container-fluid" >
< div class = "row-fluid" >
< div class = "span7" >
< h1 > Shuffle< / h1 >
< p > Categorize, sort, and filter a responsive grid of items< / p >
< / div >
< / div >
< / header >
< section >
< div class = "container-fluid" >
< h2 > Downloads< / h2 >
< nav role = "secondary" >
< a href = "js/jquery.shuffle.js" > jquery.shuffle.js< / a >
< a href = "js/jquery.shuffle.min.js" > jquery.shuffle.min.js< / a >
< / nav >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Example< / h2 >
< / div >
< div class = "container-fluid filter" >
< div class = "row-fluid" >
< p class = "filter__label" > Filter:< / p >
< div class = "filter-options btn-group" >
< button class = "btn btn--filter" data-group = "wallpaper" > Wallpapers< / button >
< button class = "btn btn--filter" data-group = "graphics" > Graphic Design< / button >
< button class = "btn btn--filter" data-group = "photography" > Photography< / button >
< button class = "btn btn--filter" data-group = "3d" > 3D Renders< / button >
< / div >
< / div >
< div class = "row-fluid" >
< p class = "filter__label" > Sort:< / p >
< div class = "sort-options btn-group" >
< button class = "btn btn--sort" data-sort class = "active" > Default< / button >
< button class = "btn btn--sort" data-sort = "title" > Title< / button >
< button class = "btn btn--sort" data-sort = "date-created" > Date Created< / button >
< / div >
< input class = "filter__search js-shuffle-search" type = "search" placeholder = "Search..." / >
< / div >
< / div >
< div class = "container-fluid" >
< div id = "grid" class = "row-fluid shuffle--fluid" >
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
< div class = "span3 shuffle__sizer" > < / div >
<!-- <div class="item" data - groups='["photography"]' data - date - created="2010 - 09 - 14" data - title="Baseball">
< img src = "img/baseball.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Baseball< / span >
< a href = "img/originals/baseball.jpg" > Photography< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["wallpaper", "3d"]' data-date-created = "2011-08-14" data-title = "Tennis" >
< p class = "rfloat" > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.< / p >
< img src = "img/tennis-ball.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Tennis< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item" data-groups = '["3d", "wallpaper"]' data-date-created = "2009-05-27" data-title = "iMac" >
< img src = "img/imac.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > iMac< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item h2" data-groups = '["graphics"]' data-date-created = "2012-05-14" data-title = "Master Chief" >
< img src = "img/master-chief.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Master Chief< / span >
< a href = "#" > Graphic Design< / a >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.< / p >
< / div >
< / div >
< div class = "item" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-09-14" data-title = "Eightfold" >
< img src = "img/es-blue.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Eightfold< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["photography"]' data-date-created = "2012-03-14" data-title = "Pumpkin" >
< p class = "rfloat" > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.< / p >
< img src = "img/pumpkin.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Pumpkin< / span >
< a href = "#" > Photography< / a >
< / div >
< / div >
< div class = "item w2 h2" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-09-14" data-title = "Vestride" >
< img src = "img/vestride-red.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Vestride< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item h2" data-groups = '["graphics"]' data-date-created = "2012-01-12" data-title = "Newegg" >
< img src = "img/newegg.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Newegg< / span >
< a href = "#" > Motion Graphics< / a >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.< / p >
< / div >
< / div >
< div class = "item" data-groups = '["wallpaper"]' data-date-created = "2012-01-14" data-title = "Arc" >
< img src = "img/eightfoldarc.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Arc< / span >
< a href = "#" > Wallpaper< / a >
< / div >
< / div >
< div class = "item" data-groups = '["photography"]' data-date-created = "2011-01-14" data-title = "Ground" >
< img src = "img/ground.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Ground< / span >
< a href = "img/originals/baseball.jpg" > Photography< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["wallpaper"]' data-date-created = "2011-12-14" data-title = "Grass" >
< p class = "rfloat" > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.< / p >
< img src = "img/grassy-hills.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Grass< / span >
< a href = "#" > Wallpaper< / a >
< / div >
< / div >
< div class = "item" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-04-14" data-title = "Vestride" >
< img src = "img/vestride-classy.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Vestride< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div > -->
< / div >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Other Examples< / h2 >
< nav role = "primary" >
< a href = "{% post_url demos/2013-05-01-basic %}" > Basic masonry layout< / a >
< a href = "{% post_url demos/2013-05-03-minimal %}" > The minimal markup with filters< / a >
< a href = "{% post_url demos/2013-05-02-adaptive %}" > Twitter bootstrap adaptive masonry with compounded filters< / a >
< / nav >
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include features.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include options.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include usage.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include events.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include sorting.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
{% include advanced-filters.html %}
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Dependencies< / h2 >
< ul >
< li > < a target = "_blank" href = "http://jquery.com" > jQuery< / a > < / li >
< li > < a target = "_blank" href = "http://modernizr.com" > Modernizr< / a >
< ul >
< li > A custom Modernizr build has been included with the plugin.< / li >
< li > If you already have Modernizr on your site, you may delete it.< / li >
< li > If you don't know what Modernizr is, leave it!< / li >
< / ul >
< / li >
< / ul >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Supported Browsers< / h2 >
< ul >
< li > Chrome< / li >
< li > Firefox< / li >
< li > IE 7+< / li >
< li > Opera< / li >
< li > Safari< / li >
< / ul >
< p >
Browsers that don't support CSS transitions and transforms < strong > *cough*< / strong > IE < = 9 < strong > *cough*< / strong > will see a less cool, javascript based version of the effect.
< / p >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Links< / h2 >
< ul >
< li > < a href = "https://github.com/Vestride/Shuffle" > GitHub Repo< / a > < / li >
< li > < a href = "http://isotope.metafizzy.co/" > Inspired by Isotope< / a > < / li >
< li > < a href = "http://glencheney.com" > Me< / a > < / li >
< / ul >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Changes< / h2 >
{% include changelog.html %}
< / div >
< / section >
