---
layout: default
title: Shuffle.js
bodyClass: home
extraJS: [ "demos/homepage.js" ]
includeHeader: true
prism: true
---
< section id = "downloads" >
< div class = "container-fluid" >
< h2 > Downloads< / h2 >
< div class = "row-fluid" >
< nav class = "span6" role = "secondary" >
< a href = "{{ site.baseurl }}/dist/jquery.shuffle.js" > jquery.shuffle.js< / a >
< a href = "{{ site.baseurl }}/dist/jquery.shuffle.min.js" > jquery.shuffle.min.js< / a >
< / nav >
< / div >
< / div >
< / section >
< section id = "demo" >
< div class = "container-fluid" >
< h2 > Example< / h2 >
< / div >
< div class = "container-fluid filter" >
< div class = "row-fluid" >
< input class = "filter__search js-shuffle-search" type = "search" placeholder = "Search..." / >
< / div >
< div class = "row-fluid" >
< div class = "span9" >
< p class = "filter__label" > Filter:< / p >
< div class = "filter-options btn-group" >
< button class = "btn btn--warning" data-group = "wallpaper" > Wallpapers< / button >
< button class = "btn btn--warning" data-group = "graphics" > Graphic Design< / button >
< button class = "btn btn--warning" data-group = "photography" > Photos< / button >
< button class = "btn btn--warning" data-group = "3d" > 3D Renders< / button >
< / div >
< / div >
< div class = "span3" >
< div class = "m-nofloat pull-right" >
< p class = "filter__label" > Sort:< / p >
< select class = "sort-options" >
< option value > Default< / option >
< option value = "title" > Title< / option >
< option value = "date-created" > Date Created< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< div class = "container-fluid" >
< div id = "grid" class = "row-fluid m-row shuffle--container shuffle--fluid" >
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
< div class = "span3 m-span3 shuffle__sizer" > < / div >
< / div >
< / div >
< / section >
< section id = "demos" >
< div class = "container-fluid" >
< h2 > Demos< / h2 >
{% include demo-list.html %}
< / div >
< / section >
< section id = "features" >
< div class = "container-fluid" >
{% include features.html %}
< / div >
< / section >
< section id = "options" >
< div class = "container-fluid" >
{% include options.html %}
< / div >
< / section >
< section id = "usage" >
< div class = "container-fluid" >
{% include usage.html %}
< / div >
< / section >
< section id = "events" >
< div class = "container-fluid" >
{% include events.html %}
< / div >
< / section >
< section id = "sorting" >
< div class = "container-fluid" >
{% include sorting.html %}
< / div >
< / section >
< section id = "advanced-filters" >
< div class = "container-fluid" >
{% include advanced-filters.html %}
< / div >
< / section >
< section id = "extra-features" >
< div class = "container-fluid" >
< h2 > Extra Features< / h2 >
< p > Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into < a target = "_blank" href = "http://packery.metafizzy.co/" > packery< / a > or < a target = "_blank" href = "http://isotope.metafizzy.co/" > isotope< / a > .< / p >
< / div >
< / section >
< section id = "dependencies" >
< div class = "container-fluid" >
< h2 > Dependencies< / h2 >
< ul >
< li > < a target = "_blank" href = "http://jquery.com" > jQuery 1.9+< / a > < / li >
< li > < a target = "_blank" href = "http://modernizr.com" > Modernizr< / a >
< ul >
< li > In case you aren't already using Modernizr, there is < a href = "{{ site.baseurl }}/dist/jquery.shuffle.modernizr.js" > a Shuffle.js build which includes Modernizr< / a > .< / li >
< li > Shuffle relies on < code > Modernizr.csstransitions< / code > , < code > Modernizr.csstransforms< / code > , < code > Modernizr.csstransforms3d< / code > , and < code > Modernizr.prefixed< / code > .< / li >
< / ul >
< / li >
< / ul >
< / div >
< / section >
< section id = "browsers" >
< 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 id = "links" >
< 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://github.com/Vestride" > Me< / a > < / li >
< / ul >
< / div >
< / section >
< section id = "changelog" >
< div class = "container-fluid" >
{% include changelog.html %}
< / div >
< / section >
{% include credit-jake.html %}