---
layout: default
title: Shuffle.js
bodyClass: home
extraJS: [ "demos/homepage.js" ]
includeHeader: true
prism: true
---
< section id = "install" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Install< a href = "#install" > < / a > < / h2 >
< / div >
< div class = "col-12@sm" >
< div class = "code-block" >
< pre > < code class = "language" > npm install shufflejs --save< / code > < / pre >
< / div >
< p > Shuffle is also available on bower as < code > shufflejs< / code > .< / p >
< / div >
< / div >
< div class = "row" >
< nav class = "col-6@sm" role = "secondary" >
< a href = "https://github.com/Vestride/Shuffle" > View the GitHub repository< / a >
< a href = "https://github.com/Vestride/Shuffle/releases" > See the latest releases< / a >
< / nav >
< / div >
< / div >
< / section >
< section id = "demo" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Example< a href = "#demo" > < / a > < / h2 >
< / div >
< / div >
< / div >
< div class = "container filter" >
< div class = "row" >
< div class = "col-12@sm" >
< input class = "filter__search js-shuffle-search" type = "search" placeholder = "Search..." / >
< / div >
< / div >
< div class = "row" >
< div class = "col-9@sm" >
< 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 = "col-3@sm" >
< 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" >
< div id = "grid" class = "row shuffle--container shuffle--fluid" >
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
< div class = "col-1@sm col-1@xs shuffle__sizer" > < / div >
< / div >
< / div >
< / section >
< section id = "demos" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Demos< a href = "#demos" > < / a > < / h2 >
< / div >
< / div >
{% include demo-list.html %}
< / div >
< / section >
< section id = "features" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include features.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "options" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include options.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "usage" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include usage.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "events" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include events.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "sorting" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include sorting.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "advanced-filters" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include advanced-filters.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "adding-removing" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include adding-removing.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "public-methods" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include public-methods.html %}
< / div >
< / div >
< / div >
< / section >
< section id = "extra-features" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Extra Features< a href = "#extra-features" > < / a > < / 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 >
< / div >
< / div >
< / section >
< section id = "dependencies" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Dependencies< a href = "#dependencies" > < / a > < / h2 >
< / div >
< / div >
< / div >
< / section >
< section id = "browsers" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Supported Browsers< a href = "#browsers" > < / a > < / h2 >
< ul >
< li > Chrome< / li >
< li > Firefox< / li >
< li > IE 11+< / li >
< li > Safari< / li >
< / ul >
< p > Many other browsers will likely work as well and support for others may be added with polyfills for ES5 features. If you require broader browser support, use the most recent < code > v3< / code > of Shuffle.< / p >
< / div >
< / div >
< / div >
< / section >
< section id = "be-social" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
< h2 > Be Social< a href = "#be-social" > < / a > < / h2 >
< div class = "text-center" >
< iframe src = "http://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=watch&count=true&size=large" height = "30" width = "170" frameborder = "0" scrolling = "0" style = "width:170px; height: 30px;" allowTransparency = "true" seamless > < / iframe >
< a href = "https://twitter.com/share" class = "twitter-share-button" data-url = "http://vestride.github.io/Shuffle/" data-via = "Vestride" data-size = "large" > Tweet< / a >
< div class = "g-plusone" data-href = "http://vestride.github.io/Shuffle/" data-size = "standard" data-annotation = "bubble" > < / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< section id = "changelog" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include changelog.html %}
< / div >
< / div >
< / div >
< / section >
{% include credit-jake.html %}
< script >
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
< / script >