jquery同位素过滤淡化不匹配的项目而不是隐藏

Question

Jquery 同位素过滤淡化不匹配的项目而不是隐藏。 如果过滤不匹配的项目，则获得显示无的属性。 我想显示匹配项应该自动向上滚动，其他应该向下滚动 像这样的东西 http://base22.com/wps/portal/home/about-us/our-team

var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            hiddenStyle: {opacity: 0.7},
            visibleStyle: {opacity: 1},
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        $('.innermenu .list-inline li a').click(function() {
            $('.innermenu .list-inline li .current').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('post-category');
            $container.isotope({
                filter: selector,
                hiddenStyle: {opacity: 0.7},
                visibleStyle: {opacity: 1},
                itemPositionDataEnabled: true,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-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;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

.isotope:after {
  content: '';
  display: block;
  clear: both;
}

<?php
get_header();
?>
<?php // echo get_the_ID(); ?> 
<div class="row submenu">       
    <div class="col-md-12 col-sm-12 col-xs-12 submenu-padding">
        <nav class="innermenu">
            <ul class="list-inline">
                <li><p class="tags-menu submenu-padding">tags</p> </li>
                <li><a href="#" post-category="*" class="current">All</a></li>
                <li><a href="#" post-category=".mobile">Mobile</a></li>
                <li><a href="#" post-category=".websites">websites</a></li>
                <li><a href="#" post-category=".social-media">Social Media</a></li>
                <li><a href="#" post-category=".digital-activation">Digital Activation</a></li>
                <li><a href="#" post-category=".films">Films</a></li>
                <li><a href="#" post-category=".search">Search</a></li>      
                <li><a href="#" post-category=".media">Media</a></li>
            </ul>

        </nav> 
    </div>
</div>
<?php
if (have_posts()) :
    ?>
    <div class="portfolioContainer">
        <?php while (have_posts()): the_post() ?> 
            <div class="col-md-4 col-sm-4 col-xs-12 portfolio thumbnail-margin <?php
            $categories = get_the_category();
            $separator = ' ';
            $output = '';
            if ($categories) {
                foreach ($categories as $category) {
                    $output .= $category->slug . $separator;
                } echo trim($output, $separator);
            }
            ?>">
                <div class="thumbnail">
                    <a href="<?php echo get_permalink(); ?>">  
                        <?php
                        if (has_post_thumbnail()) {
                            the_post_thumbnail();
                        }
                        ?>
                        <div class="caption">
                            <h4 class="portfolio-heading"><?php echo the_title(); ?></h4>
                            <div class="portfolio-caption"> <?php the_excerpt(); ?></div>
                        </div>
                    </a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
    <?php
endif;
?>

<?php
get_footer();

顶行上的 ed 元素和所有其他元素应相应向下移动。

Answer 1

也许你可以用 Dave Desandro 的同位素hide-reveal plugin 做一些事情，它不会显示：没有不匹配的项目，只会淡化到某个不透明度值。然后，您可以根据需要为可见和褪色的项目设置动画。

$( function() {
// init Isotope
    var $container = $('.your-container').isotope({
            layoutMode: 'your-layout',
            itemSelector: '.your-item'
    });

    /* some filter functions for example... 
    var filterFns = {
        show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt( number, 10 ) > 50;
        },
        show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match( /ium$/ );
        }
    };*/

    // bind filter button click
    $('#filters').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.hideReveal({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
            $buttonGroup.find('.current').removeClass('current');
            $( this ).addClass('current');
        });
    });

});

// here you can add animations for your visible and hidden items
$.fn.hideReveal = function( options ) {     
    options = $.extend({
        filter: '*',
        hiddenStyle: { opacity: 0.2 },
        visibleStyle: { opacity: 1 },
    }, options );       
    this.each( function() {
        var $items = $(this).children();
        var $visible = $items.filter( options.filter );
        var $hidden = $items.not( options.filter );
        // reveal visible
        $visible.animate( options.visibleStyle );
        // hide hidden
        $hidden.animate( options.hiddenStyle );
    });
};

Answer 2

我会先问你是否需要同位素。它并不是真正为这样的过滤器而构建的。如果您需要它进行布局并且无法使用 flexbox 或浮动获得相同的效果，那么不要尝试扩展同位素过滤，只需制作您自己的过滤脚本来从您的项目中添加/删除 active 类。 css 可以处理其余的。对于过滤，我会这样说：

<script>
jQuery(document).ready(function($) {
    // do this for each item on your page that needs filters
    $('.filtered-section').each(function(index, el) {
        // helper var
        $this = $(this);
        // more helpers
        $filters = $this.find('.item-filters .filter');
        $itemHolder = $this.find('.items');
        $items = $this.find('.items .item');
        // filter click event
        $filters.click(function(event) {
            // if you only want one active filter do this: 
            // otherwise remove the next line 
            $filters.removeClass('active');
            // make the clicked filer active.
            $(this).toggleClass('active'); // toggle, not add, in case you remove the line above.
            // create array for selectors
            selectorArray = [];
            // for each active filter toss the css selector from the data attribue into the array
            $filters.filter('.active').each(function(index, el) {
                selectorArray.push($(el).data('filter'));
            });
            // make a string from the array, joining them with commas
            selector = selectorArray.join(', ');
            // if the All selector is chosen then stop filtering all together
            if (selector == "*") {
                $items.removeClass('active');
                $itemHolder.removeClass('filtered');
            } else {
                // otherwise
                // Add an active class to all items matching the filter
                $items.filter(selector).addClass('active');
                // remove the class from all not matching
                $items.not(selector).removeClass('active');
                // make sure the holder is set to filtered so your css triggers
                $itemHolder.addClass('filtered');
            }
        });
    });
});
</script>

<div class="filtered-section">
    <div class="item-filters">
        <ul>
            <li><a href="#view-all" data-filter="*">View All</a></li>
            <li><a href="#filter-1" data-filter=".filter-1">Filter 1</a></li>
            <li><a href="#filter-2" data-filter=".filter-2">Filter 2</a></li>
            <li><a href="#filter-3" data-filter=".filter-3">Filter 3</a></li>
            <li><a href="#filter-4" data-filter=".filter-4">Filter 4</a></li>
            <li><a href="#filter-5" data-filter=".filter-5">Filter 5</a></li>
        </ul>
    </div><!-- /.item-filters -->
    <div class="items">
        <div class="item filter-1">Filtered 1</div><!-- /.item filter-1 -->
        <div class="item filter-2">Filtered 2</div><!-- /.item filter-2 -->
        <div class="item filter-3">Filtered 3</div><!-- /.item filter-3 -->
        <div class="item filter-4">Filtered 4</div><!-- /.item filter-4 -->
        <div class="item filter-5">Filtered 5</div><!-- /.item filter-5 -->
    </div><!-- /.items -->
</div><!-- /.filtered-section -->


<style>
.items .item {
  transition: all 600ms linear;
  opacity: 1;
}

.items.filtered .item {
  opacity: 0.5;
}

.items.filtered .item.active {
  opacity: 1;
}
</style>

这仍然适用于同位素组项目，只需更改 jQuery 和 CSS 中的选择器。

请注意，如果您的.active 样式更改了宽度或高度或其他间距属性，则您必须在过滤器单击功能结束时再次调用$('.isotope').isotope('layout');。