---
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 = "http://codepen.io/pen?template=qrjOpX" target = "_blank" rel = "noopener" > Start a CodePen with a Shuffle template < span style = "font-family:monospace;" > ↗< / span > < / a >
< 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 my-shuffle-container" >
{% for item in site.data.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
< div class = "col-1@sm col-1@xs my-sizer-element" > < / 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 = "custom-styles" >
< div class = "container" >
< div class = "row" >
< div class = "col-12@sm" >
{% include custom-styles.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 >
< p > Shuffle's < a href = "{{ site.baseurl }}/package.json" > dependencies< / a > are bundled with the dist file.< / p >
< / 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 > Edge< / li >
< li > IE 11< / li >
< li > Safari< / li >
< / ul >
< p > Support for other browsers may be added with polyfills for ES5 features. If you require broader browser support, use the most recent < code > v3< / code > release 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 = "https://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=star&size=large" frameborder = "0" scrolling = "0" width = "76px" height = "30px" > < / iframe >
< a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "Vestride" data-size = "large" > Tweet< / a >
< div class = "g-plusone" data-annotation = "none" > < / 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 >