$(function(){ var $container = $('#container'), $checkboxes = $('#filters input'); $container.isotope({ itemSelector: '.item', // filter red items first filter: '.red' }); $checkboxes.change(function(){ var filters = []; // get checked checkboxes values $checkboxes.filter(':checked').each(function(){ filters.push( this.value ); }); // ['.red', '.blue'] -> '.red, .blue' filters = filters.join(', '); $container.isotope({ filter: filters }); }); $('#shuffle').click(function(){ $container.isotope('shuffle'); }); });
<div id="filters"> <input type="checkbox" name="red" value=".red" id="red" checked><label for="red">red</label> <input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label> <input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label> <input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label> </div> <p><button id="shuffle">Shuffle</button></p> <div id="container"> <div class="item red"></div> <div class="item blue"></div> <div class="item green"></div> <div class="item yellow"></div> <div class="item red"></div> <div class="item blue"></div> <div class="item green"></div> <div class="item yellow"></div> <div class="item red"></div> <div class="item blue"></div> <div class="item green"></div> <div class="item yellow"></div> <div class="item red"></div> <div class="item blue"></div> <div class="item green"></div> <div class="item yellow"></div> <div class="item red"></div> <div class="item blue"></div> <div class="item green"></div> <div class="item yellow"></div> </div>
body { font-family: 'Helvetica Neue', Arial, sans-serif; } #container { border: 1px solid; padding: 3px; } .item { width: 70px; height: 70px; margin: 3px; float: left; } .item.next { width: 60px; height: 60px; border: 5px solid black; border-radius: 35px; } .red { background: red; } .blue { background: blue; } .green { background: green; } .yellow { background: yellow; } /* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */