javascript - 使用同位素过滤动态数据

Question

我不是 JavaScript 专家，需要您的帮助。我正在使用同位素创建一个带有图片的网站 http://strategenundgestalter.de ，但在布局上是有突破的。

它看起来像:

但它应该看起来像:

我使用的代码是:

if( jQuery().isotope ) {

    jQuery(function() {

        var container = jQuery('.isotope'),
            optionFilter = jQuery('#sort-by'),
            optionFilterLinks = optionFilter.find('a');

        optionFilterLinks.attr('href','#');

        optionFilterLinks.click(function(){
            var selector = jQuery(this).attr('data-filter');
            container.isotope({ 
                filter : '.' + selector, 
                itemSelector : '.isotope-item',
                animationEngine : 'best-available',
                layoutMode : 'masonry',
                columnWidth: '220'
            });

            // Highlight the correct filter
            optionFilterLinks.removeClass('active');
            jQuery(this).addClass('active');
            return false;
        });

    });

}

当我加载页面时，默认过滤器是“全部”，布局如下所示。当我单击所有布局的过滤器按钮时，一切都正常。但不是在页面加载后。我必须始终点击“全部按钮”。

你发现问题了吗？

哦，对不起。 HTML:

<?php
/*
Template Name: Portfolio Template
*/
?>

<?php get_header(); ?>

            <!--BEGIN .page-header -->
            <div class="page-header">

                <h1 class="page-title"><?php the_title(); ?></h1>
                <ul id="sort-by">
                    <li><a href="#all" data-filter="type-portfolio" class="active"><?php _e('alle', 'framework'); ?></a></li>
                    <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'portfolio-type', 'walker' => new Portfolio_Walker() ) ); ?>
                </ul>

            <!--END .page-header -->
            </div>

            <!--BEGIN #primary .hfeed-->
            <div id="primary" class="hfeed isotope">
            <?php 
            $args = array(
                'post_type' => 'portfolio',
                'orderby' => 'menu_order',
                'order' => 'ASC',
                'posts_per_page' => -1
            );
            $query = new WP_Query( $args );

            while ( $query->have_posts() ) : $query->the_post(); ?>

                <?php 
                    $terms =  get_the_terms( $post->ID, 'portfolio-type' ); 
                    $term_list = '';
                    if( is_array($terms) ) {
                        foreach( $terms as $term ) {
                            $term_list .= urldecode($term->slug);
                            $term_list .= ' ';
                        }
                    }
                ?>

                <!--BEGIN .hentry -->
                <div <?php post_class("$term_list isotope-item"); ?> id="post-<?php the_ID(); ?>">              
                    <?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
                    <div class="post-thumb">
                        <a title="<?php printf(__('Permanent Link to %s', 'framework'), get_the_title()); ?>" href="<?php the_permalink(); ?>">

                            <?php the_post_thumbnail('portfolio-thumb'); ?>
                        </a>
                    </div>
                    <?php } ?>

                    <h2 class="entry-title"></h2>

                    <!--BEGIN .entry-meta -->
                    <div class="entry-meta"><?php the_title(); ?><br/>
                    <span class="entry-portfolio-type"></span>  
                    <!--END .entry-meta -->
                    </div>

                <!--END .hentry-->  
                </div>

                <?php endwhile; ?>

            <?php wp_reset_postdata(); ?>

            <!--END #primary .hfeed-->
            </div>

<?php get_footer(); ?>

和CSS:

.page-template-template-portfolio-php #primary,
.tax-portfolio-type #primary {
    width: 100%;
}

.page-template-template-portfolio-php .page-header,
.tax-portfolio-type .page-header { margin-right: 20px;}

.page-template-template-portfolio-php .hentry,
.tax-portfolio-type .hentry,
.tz-recent-portfolios-widget li {
    background: #fff;
    border-bottom: none;
    float: left;
    margin: 0px 20px 0px 0px;
    padding: 0px;
    width: 220px;
}

.page-template-template-portfolio-php .last,
.tax-portfolio-type .last { margin-right: 0; }

.page-template-template-portfolio-php .post-thumb,
.tax-portfolio-type .post-thumb,
.recent-work .post-thumb,
.portfolio-related .post-thumb,
.tz-recent-portfolios-widget .post-thumb { 
    margin: 0; 
    position: relative;
}

.page-template-template-portfolio-php .post-thumb a,
.tax-portfolio-type .post-thumb a,
.recent-work .post-thumb a,
.portfolio-related .post-thumb a,
.tz-recent-portfolios-widget .post-thumb a {
    border-bottom: none;
    display: block;
    margin: 0px;
    padding: 0;
    position: relative;
    width: 220px;
}

.page-template-template-portfolio-php .post-thumb-overlay,
.tax-portfolio-type .post-thumb-overlay,
.recent-work .post-thumb-overlay,
.portfolio-related .post-thumb-overlay,
.tz-recent-portfolios-widget .post-thumb-overlay,
{
    background-color: #333;
    color: #fff;
    display: none;
    padding: 2px 6px;
    position: absolute;
    top: 43%;
    left: 32%;
}

.page-template-template-portfolio-php a:hover .post-thumb-overlay,
.tax-portfolio-type a:hover .post-thumb-overlay,
.recent-work a:hover .post-thumb-overlay,
.portfolio-related a:hover .post-thumb-overlay,
.tz-recent-portfolios-widget a:hover .post-thumb-overlay,
.page-template-template-portfolio-php .hentry .entry-meta   { 
    display: block;
    z-index: 99;
}

.page-template-template-portfolio-php .hentry .entry-title,
.page-template-template-portfolio-php .hentry .entry-title a,
.tax-portfolio-type .hentry .entry-title,
.tax-portfolio-type .hentry .entry-title a,
.recent-work .entry-title,
.recent-work .entry-title a,
.portfolio-related .entry-title,
.portfolio-related .entry-title a,
.tz-recent-portfolios-widget .entry-title,
.tz-recent-portfolios-widget .entry-title a {
    font-size: 13px;
    line-height: 10px;
    margin: 15px 0 2px;
    text-align: left;
}

.page-template-template-portfolio-php .hentry .entry-meta,
.tax-portfolio-type .hentry .entry-meta,
.tz-recent-portfolios-widget .entry-meta{ 
font-size: 12px;
line-height: 12px;
font-weight: bold;
margin: 5%;
text-transform: uppercase;
    left: auto;
color: #fff;
text-align: center;
width: 90%;
opacity: 0.6;
}


.page-template-template-portfolio-php .post-thumb a:hover img,
.tax-portfolio-type .post-thumb a:hover img,
.recent-work .post-thumb a:hover img,
.portfolio-related .post-thumb a:hover img,
.tz-recent-portfolios-widget .post-thumb a:hover img
{ opacity: 0.1; }



.page-template-template-portfolio-php .page-title,
.tax-portfolio-type .page-title { display: inline-block; }

#sort-by { float: right; }

.ie7 #sort-by {
    position: relative;
    top: -20px;
    right: -18px;
}

#sort-by li {
    float: left;
    padding-left: 0px;
    margin-left: 7px;
}

#sort-by li:first-child { background: none; }

#sort-by a {
    border-bottom: none;
    color: #555;
    padding: 2px 5px;
    margin: 0;
}

#sort-by a.active { background-color: #ffd62c; }

谢谢!!!

Answer 1

我没有看到任何实际上在加载时触发脚本的脚本。我刚刚尝试添加:

jQuery(document).ready(function(){
    jQuery('.isotope').isotope()
    });

它有效。

我不是同位素专家，也不是 JS 专家，但这听起来很合乎逻辑。您只是将插件包含在代码中，但不执行它们，即使我不知道为什么按钮可以工作。我猜想，使用标记和一些经验法则，同位素开箱即用，效果很好。

事实上，请小心，您将 jquery.isotope.min.js?ver=1.5.25 包含两次，一次在页眉中，另一次在页脚中。

希望这对您有帮助。