using isotope library with square layout library

Question

My problem is to create layout as in example http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/ and use isotop filtering. And I use also isotope library for filtering, here is a code for filtering:

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

But I have a gap. When I use only this library, the filtering fails.

Has any idea to do it?

Answer 1

Do you have try using isotope library from Masonry? I think this is great, i have try created in my project you can check in here.

This is my code for display Filtered button 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>

Also this for display the 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>

Also in my jQuery script like this:

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

Hopefully this is clear and helping you.