我的问题是如示例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库时,过滤失败。
有任何想法吗?
答案 0 :(得分: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');
});
});
});
});
希望这很清楚并帮助你。