Isotope · Filtering_jQuery之家-自由分享jQuery、html5、css3的...

来自 : www.htmleaf.com/pins/isotope-d 发布时间：2021-03-24

You can hook filtering into the hashchange event so that Isotope filters can be applied as links. See filtering with URL hash example on CodePen, view code on CodePen.

function getHashFilter() { var hash = location.hash; // get filter=filterName var matches = location.hash.match( /filter=([^ ]+)/i ); var hashFilter = matches matches[1]; return hashFilter decodeURIComponent( hashFilter );$( function() { var $container = $(\'.isotope\'); // bind filter button click var $filters = $(\'#filters\').on( \'click\', \'button\', function() { var filterAttr = $( this ).attr(\'data-filter\'); // set filter in hash location.hash = \'filter=\' + encodeURIComponent( filterAttr ); var isIsotopeInit = false; function onHashchange() { var hashFilter = getHashFilter(); if ( !hashFilter isIsotopeInit ) { return; isIsotopeInit = true; // filter isotope $container.isotope({ itemSelector: \'.element-item\', filter: hashFilter // set selected class on button if ( hashFilter ) { $filters.find(\'.is-checked\').removeClass(\'is-checked\'); $filters.find(\'[data-filter=\"\' + hashFilter + \'\"]\').addClass(\'is-checked\'); $(window).on( \'hashchange\', onHashchange ); // trigger event handler to init Isotope onHashchange();});

// init Isotope var $container = $('#container').isotope({ // options }); // filter items on button click $('#filters').on( 'click', '...Isotope-神奇的分类过滤和排序布局插件Isotope · Filtering