https://github.com/glen-cheney/Shuffle
Categorize, sort, and filter a responsive grid of items
https://github.com/glen-cheney/Shuffle
filter grid layout masonry responsive sort
Last synced: 2 months ago
JSON representation
Categorize, sort, and filter a responsive grid of items
- Host: GitHub
- URL: https://github.com/glen-cheney/Shuffle
- Owner: glen-cheney
- License: mit
- Created: 2011-12-24T18:33:07.000Z (almost 14 years ago)
- Default Branch: main
- Last Pushed: 2025-07-20T18:35:51.000Z (3 months ago)
- Last Synced: 2025-07-24T23:22:56.116Z (2 months ago)
- Topics: filter, grid, layout, masonry, responsive, sort
- Language: JavaScript
- Homepage: https://shuffle.js.org
- Size: 16.2 MB
- Stars: 2,380
- Watchers: 55
- Forks: 280
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# [Shuffle][homepage] ![Build Status][actions-img] [![Dependabot Status][dependabot-img]][dependabot-url] [![NPM version][npm-img]][npm-url]
Categorize, sort, and filter a responsive grid of items.
```bash
npm install shufflejs
```
## Docs and Demos
[All found here][homepage]
### Usage (with ES6)
```js
import Shuffle from 'shufflejs';
const shuffleInstance = new Shuffle(document.getElementById('grid'), {
itemSelector: '.js-item',
sizer: '.js-shuffle-sizer',
});
```
## Inspiration
This project was inspired by [Isotope](http://isotope.metafizzy.co/) and [Packery](http://packery.metafizzy.co/).
[homepage]: https://shuffle.js.org
[actions-img]: https://github.com/glen-cheney/Shuffle/actions/workflows/build.yml/badge.svg?branch=main
[npm-url]: https://www.npmjs.com/package/shufflejs
[npm-img]: https://img.shields.io/npm/v/shufflejs.svg
[dependabot-url]: https://docs.github.com/en/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/configuring-dependabot-security-updates
[dependabot-img]: https://img.shields.io/badge/Dependabot-enabled-blue.svg