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

Posted 2023-03-25

【中文标题】jquery同位素过滤淡化不匹配的项目而不是隐藏

【英文标题】：Jquery isotope filtering fade unmatched items instead of hiding

【发布时间】：2014-11-13 01:01:00

【问题描述】：

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 元素和所有其他元素应相应向下移动。

【问题讨论】：

嗨，Aj，PHP 部分不应该在代码 sn-p 中。将循环的 html 输出放在have_posts() 中，这样我们就可以看到 jQuery 效果并将 PHP 传递到一个独立的块中（没有 sn-p）。

【参考方案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 );
    );
;

【参考方案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');。