사각형 레이아웃 라이브러리가있는 동위 원소 라이브러리 사용

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에 체크인 할 수 있도록 만들어 봤다.

이것은 표시 또한이 워드 프레스

에 표시 필터링 버튼 내 코드

<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> 

입니다 워드 프레스

이처럼 내 jQuery를 스크립트 또한

<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> 

의 그리드 :

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

잘하면이 분명하고 도움이됩니다.