使用同位素過濾動態數據

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 ，一個包含在頁眉中，另一個包含在頁腳中。

我希望這可以幫助你。