在url中显示同位素投资组合筛选项

Question

我有一个组合过滤器，我想将特定的过滤器链接到另一个页面。

<ul class="filter">
<li><a class="active" href="#" data-filter=".cat1">Branding</a></li>
<li><a href="#" data-filter=".cat2">Creative</a></li>
<li><a href="#" data-filter=".cat3">Website Design</a></li>
</ul>

从上面的代码，它有三个品牌，创意和网站设计。过滤器工作良好，我希望将筛选项链接到其他页面。例如。我想链接创意与创意网页，并在我点击创意链接从创意页，它应该转到组合页面与创造性作为默认。我添加了类似于这个http://url.com/portfolio#filter=.cat2的链接，但它不起作用

这个来自http://isotope.metafizzy.co的javascript

$(document).ready(function () {
    var $container = $('.full-portfolio .items');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows',
            onLayout: realignCaptions
        });

    });

    // hook to window resize to resize the portfolio items for fluidity / responsiveness
    $(window).smartresize(function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        for ( var i = 0; i < isotopeBreakpoints.length; i++ ) {
            if (windowWidth >= isotopeBreakpoints[i].min_width || !isotopeBreakpoints[i].min_width) {
                if (windowWidth < isotopeBreakpoints[i].max_width || !isotopeBreakpoints[i].max_width) {
                    $container.find('.item').each(function() {
                        $(this).width( Math.floor( $container.width() / isotopeBreakpoints[i].columns ) );
                    });

                    break;
                }
            }
        }
    });

    $(window).trigger( 'smartresize' );


    $('.filter li a').click(function () {

        $('.filter li a').removeClass('active');
        $(this).addClass('active');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });

        return false;
    });
});

// Vertically realign the captions inside portfolio items
function realignCaptions($container) {
  $container.each(function() {
         var $h5 = $(this).find('a h5');
         $h5.css( 'margin-top', $(this).height() / 2 - $h5.get()[0].clientHeight / 2 );
    });
}

var $wrapper = $('.fix-portfolio .items .item');
$wrapper.find('a h5').css('visibility', 'hidden');

$(document).imagesLoaded(function() {
    $wrapper.find('a h5').css('visibility', 'visible');
    realignCaptions($wrapper);
});

Answer 1

我能想到两个选择。

选项1:

HTML：

<ul class="filter">
    <li><a class="active" href="#filter-cat1">Branding</a></li>
    <li><a href="#filter-cat2">Creative</a></li>
    <li><a href="#filter-cat3">Website Design</a></li>
</ul>

联署材料：

(function(){
    var hash = window.location.hash;
    var fitler = '';
    if(hash.match(/filter-cat/)){
        filter = hash.replace('filter-','.');
    } 
    $container.isotope({
        filter: filter
    });
})

懒得去测试它，但是你应该得到逻辑，至少如果有什么不对。

备选方案2:

与选项1相同的逻辑，但使用cookie而不是哈希标记。