使用同位素庫與方形佈局庫

Question

我的問題是創建佈局，如在示例http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/和使用同位素過濾。 而且我還用同位素庫過濾， 這裏是過濾代碼：

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

希望這是明確的，並幫助你。