Shuffle
+Shuffle and categorize a grid of items
+Downloads
+ jquery.shuffle.js + jquery.shuffle.min.js + shuffle.css +Example
+ +
+
+
+
+
+
+
+ 
+
+
+
+ Photography
+
+ 
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ Graphic Design
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ Photography
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ Motion Graphics
+
+
+ 
+
+
+
+ Wallpaper
+
+
+ 
+
+
+
+ Photography
+
+
+ 
+
+
+
+ Wallpaper
+
+
+ 
+
+
+
+
+ Features
+ +-
+
- Uses CSS Transitions! +
- Filter items by categories +
- Items can have multiple categories +
Options
+ +
+
+
+ Settings you can change
+
+
+var options = {
+ 'itemWidth' : 230, // Width of the grid item
+ 'margins' : 20, // right and bottom margins
+ 'key' : 'all' // Which category to show
+};
+
+
+
+ Change the length of the transition by changing the "0.8s" (lines 14-18 in shuffle.css)
+
+
+transition: transform 0.8s ease-out, opacity 0.8s ease-out;
+
+
+ Usage
+ +
+
+ The html structure. The only real important thing here is the 'data-key' attribute. It has to be a valid JSON array of strings.
+
+
+<div id="grid">
+ <div class="item" data-key='["photography"]'>
+ <img src="img/baseball.png" alt="" height="145" width="230" />
+ <div class="item-details">
+ <a href="img/originals/baseball.jpg">Photography</a>
+ </div>
+ </div>
+ <div class="item" data-key='["wallpaper", "3d"]'>
+ <img src="img/tennis-ball.png" alt="" height="145" width="230" />
+ <div class="item-details">
+ <a href="#">3D Render, Wallpaper</a>
+ </div>
+ </div>
+ <div class="item" data-key='["3d", "wallpaper"]'>
+ <img src="img/imac.png" alt="" height="145" width="230" />
+ <div class="item-details">
+ <a href="#">3D Render, Wallpaper</a>
+ </div>
+ </div>
+ <div class="item" data-key='["graphics"]'>
+ <img src="img/master-chief.png" alt="" height="145" width="230" />
+ <div class="item-details">
+ <a href="#">Graphic Design</a>
+ </div>
+ </div>
+</div>
+
+
+
+ Sets up the button clicks and runs shuffle
+
+
+$(document).ready(function(){
+
+ // Set up button clicks
+ $('.filter-options li').click(function() {
+ var $this = $(this),
+ $grid = $('#grid');
+
+ // Hide current label, show current label in title
+ $('.filter-options .active').removeClass('active');
+ $this.addClass('active');
+
+ // Filter elements
+ $grid.shuffle('shuffle', $this.attr('data-key'));
+ });
+
+ // instantiate the plugin
+ $('#grid').shuffle({
+ itemWidth : 230,
+ margins : 20
+ });
+});
+
+
+
+
+ This is the shuffle.css file
+
+
+#grid {
+ position: relative;
+
+ -moz-transition: height 0.8s ease-out;
+ -o-transition: height 0.8s ease-out;
+ -webkit-transition: height 0.8s ease-out;
+ -ms-transition: height 0.8s ease-out;
+ transition: height 0.8s ease-out;
+}
+
+#grid .item {
+ position: relative;
+
+ -moz-transition: -moz-transform 0.8s ease-out, opacity 0.8s ease-out;
+ -o-transition: -o-transform 0.8s ease-out, opacity 0.8s ease-out;
+ -webkit-transition: -webkit-transform 0.8s ease-out, opacity 0.8s ease-out;
+ -ms-transition: -ms-transform 0.8s ease-out, opacity 0.8s ease-out;
+ transition: transform 0.8s ease-out, opacity 0.8s ease-out;
+}
+
+#grid .item.filtered {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 1;
+}
+
+#grid .item.concealed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+}
+
+#grid .item:nth-child(4n) {
+ margin-right: 0;
+}
+
+
+
+ Dependencies
+ + +Supported Browsers
+ +-
+
- Chrome +
- Firefox +
- IE 7+ +
- Opera +
- Safari +
+ Browsers that don't support CSS transitions and transforms *cough* IE <= 9 *cough* will see a less cool, javascript based version of the effect. +
+Links
+ +
+ Github Repo
+ Inspired by Isotope
+ Me
+