Javascript 利用同位素过滤动态数据

我不是JavaScript专家，需要你的帮助。我正在使用同位素的网站与图片，但在布局是一个休息

它看起来像：

但它应该是这样的：

我使用的代码是：

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;
        });

    });

}

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

你看到问题了吗

哦，对不起。 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(); ?>

---

谢谢

我没有看到任何脚本在加载时触发脚本。我只是试着加上：

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

它起作用了

我不是同位素或JS方面的专家，但这听起来很有逻辑。您只是在代码中包含插件，但没有执行它们，尽管我不知道为什么按钮会起作用。我想同位素确实可以很好地开箱即用，使用标记和一些经验法则

事实上，请注意，您将包含两次

jquery.isotox.min.js？ver=1.5.25

，一次在页眉，另一次在页脚

---

我希望这对您有所帮助。

我没有看到任何脚本实际上会在加载时触发脚本。我只是试着加上：

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

它起作用了

我不是同位素或JS方面的专家，但这听起来很有逻辑。您只是在代码中包含插件，但没有执行它们，尽管我不知道为什么按钮会起作用。我想同位素确实可以很好地开箱即用，使用标记和一些经验法则

事实上，请注意，您将包含两次

jquery.isotox.min.js？ver=1.5.25

，一次在页眉，另一次在页脚

---

我希望这对您有所帮助。

您确实需要发布html和css以获得一个好的答案。您没有显示调用脚本的位置。在执行脚本之前，您可能没有等待所有内容都正确加载。脚本加载在正文末尾。你可以在网站上看到问题所在。当站点加载时，默认过滤器为“alle”，但布局看起来很糟糕。当我再次点击过滤器“alle”时，一切都很好。你真的需要发布html和css来获得一个好的答案。你没有显示你调用脚本的位置。在执行脚本之前，您可能没有等待所有内容都正确加载。脚本加载在正文末尾。你可以在网站上看到问题所在。当站点加载时，默认过滤器为“alle”，但布局看起来很糟糕。当我再次点击过滤器“alle”时，一切正常。它工作正常！非常感谢你！你太棒了！它起作用了！非常感谢你！你太棒了！