mit Isotop-Bibliothek mit quadratischen Layout-Bibliothek

Question

Mein Problem ist das Layout wie in Beispiel http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/ zu erstellen und Isotop-Filterung verwenden. Und ich benutze auch Isotop Bibliothek zum Filtern, ist hier ein Code zur Filterung:

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

Aber ich habe eine Lücke. Wenn ich nur this Bibliothek verwende, schlägt die Filterung fehl.

Hat eine Idee, es zu tun?

Answer 1

Haben Sie versuchen, Isotop-Bibliothek von Masonry zu verwenden? Ich denke, das ist großartig, ich habe versucht in meinem Projekt erstellt können Sie in here überprüfen.

Dies ist mein Code für die Anzeige gefiltert Taste in 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> 

Auch diese für die Anzeige der Grid in 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> 

Auch in meinem jQuery Skript wie folgt:

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

Hoffentlich ist das klar und hilft Ihnen.