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: 6 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 (over 13 years ago)
- Default Branch: main
- Last Pushed: 2024-12-02T15:12:03.000Z (6 months ago)
- Last Synced: 2024-12-03T01:07:13.301Z (6 months ago)
- Topics: filter, grid, layout, masonry, responsive, sort
- Language: JavaScript
- Homepage: https://shuffle.js.org
- Size: 16.9 MB
- Stars: 2,382
- Watchers: 55
- Forks: 281
- Open Issues: 16
-
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/Vestride/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