Question

我的问题是如示例http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/创建布局并使用isotop过滤。我还使用同位素库进行过滤，这是一个过滤代码：

var $grid = jQuery('.mansory_wrapper').isotope({
        itemSelector: '.grid-item1',
        percentPosition: true,
        masonry: {
            columnWidth: 100
        }
    });

但我有差距。当我只使用this库时，过滤失败。

有任何想法吗？

Answer 1

您是否尝试使用Masonry中的同位素库？我认为这很棒，我已经尝试在我的项目中创建，您可以查看here。

这是我在WordPress中显示过滤按钮的代码

<div class="button-group filters-button-group">
    <?php
        $taxonomy = 'category-produk';
        $terms = get_terms($taxonomy); 
        foreach ( $terms as $term ) {
            echo '<button class="button" data-filter=".'.$term->slug.'">'.$term->name.'</button>';
        }
    ?></div>

这也用于在WordPress中显示网格

<div class="grid">
                <?php
                    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
                    $args = array(

                        'post_type' => 'produk',

                        'posts_per_page' => -1

                    );

                    $product = new WP_Query($args);
                    if( $product-> have_posts() ){
                        while ( $product->have_posts() ) : $product->the_post();
                            $categories = get_the_terms(get_the_ID(), 'category-produk');
                            $class = "";
                            foreach($categories as $cat){
                                $class .= $cat->slug . " ";
                            }
                        ?>
                            <div class="col-md-4 <?php echo $class; ?>">
                                <div class="side-module text-center">
                                    <a class="img-module clearfix" href="<?php echo get_the_permalink(); ?>"> 
                                      <?php 
                                        $id = get_the_ID();
                                        $url = wp_get_attachment_url( get_post_thumbnail_id($id), 'biofarma-featured-image' );
                                        //echo 'Image '.$url;
                                        if ( !empty($url) ) {
                                            echo '<img src="' . $url . '" />';
                                        }
                                        else {
                                            echo '<img src="' . get_template_directory_uri() . '/img/dummy.png" />';
                                        }
                                      ?>
                                    </a> 
                                    <a class="view-prod" href="<?php echo get_the_permalink(); ?>"> <h4><?php the_title(); ?></h4> </a>
                                    <p><?php echo get_post_meta($id, 'meta_data', true); ?></p>
                                </div>
                            </div>
                        <?php
                        endwhile;
                        wp_reset_postdata();
                    }
                ?>
                </div>

同样在我的jQuery脚本中：

(function($) {
"use strict"; // Start of use strict

$(function(){
    var $grid = $('.grid').isotope({
      itemSelector: '.col-md-4',
      layoutMode: 'masonry'
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });

    var filterFns = {
      // show if name ends with -ium
      ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
      }
    };

    $('.filters-button-group').on( 'click', 'button', function() {
      var filterValue = $( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $grid.isotope({ filter: filterValue });
    });
    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });
});
});

希望这很清楚并帮助你。

使用具有方形布局库的同位素库

1 个答案: