--- layout: default title: Shuffle.js bodyClass: home extraJS: [ "demos/homepage.js", "animated-favicon.js" ] includeHeader: true prism: true ---
{% include install.html %}

Example

Filter

Sort
{% for item in site.data.items %} {% assign item = item %} {% include picture-item.html %} {% endfor %}

Open in CodePen

Demos

{% include demo-list.html %}
{% include features.html %}
{% include options.html %}
{% include usage.html %}
{% include filters.html %}
{% include advanced-filters.html %}
{% include sorting.html %}
{% include events.html %}
{% include adding-removing.html %}
{% include public-methods.html %}
{% include custom-styles.html %}

Extra Features

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 packery or isotope.

Dependencies

Shuffle's dependencies are bundled with the dist file.

Shuffle does, however, expect the following ES6/7 features: Set, Array.from, Object.assign, Array.prototype.find, and Array.prototype.includes. In order to support browsers like IE11 and Safari 8, you must include a polyfill for these features. You can use a service like polyfill.io to only load the polyfills that specific browser needs, or a polyfill script like @babel/polyfill (which uses core-js internally).

Supported Browsers

  • Chrome
  • Firefox
  • Edge
  • IE 11
  • Safari

Depending on what browsers you support, you may need to polyfill features used by Shuffle.

Be Social

{% include changelog.html %}