Html 同位素筛选自定义样式问题

我需要设计同位素过滤器，如下图所示

使用同位素过滤jQuery可以做到这一点吗

---

注意：-我已经在我的WordPress站点中实现了同位素过滤。所有筛选器均为自定义帖子类型类别，右侧内容（筛选器1内容A、筛选器1内容B等）为帖子类型标题，左侧内容为自定义帖子类型内容。

请按照以下步骤操作：

1.创建一个名为

template同位素网格.php

的模板，并将此代码放入其中

<?php
/**
 * The template for displaying all posts in isotope.
 *
 * Template Name: Isotope Grid View
 *
 * @package storefront
 */

get_header(); ?>
<?php
    $query = new WP_Query(array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1
));
$categories = get_categories();
//print_r($categories);
?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php if ($query->have_posts()): ?>
            <div id="filter-menu" class="filter-button-group">              
              <button data-filter="*" class="reset active row-btn">All</button>
              <?php foreach($categories as $category):?>
              <button data-filter=".<?php echo $category->slug;?>" class="row-btn"><?php echo $category->name; ?></button>
              <?php endforeach; ?>
            </div>
        <div class="row">
        <div class="col-md-8 col-xs-8 col-sm-8" id="content_section">
        </div>


        <div class="col-md-4 col-xs-4 col-sm-4">
            <div id="grid">
            <?php while ( $query->have_posts() ) : $query->the_post();
                $categories = get_the_category(get_the_ID());
                $cat_str = '';
                foreach ($categories as $category) {
                    $cat_str .=$cat_str.' '.$category->slug;
                }

                echo '<div class="content-item '.$cat_str.'" style="display:none;">';
                echo '<h2>'.get_the_title().'</h2>';
                if (has_post_thumbnail( get_the_ID() ) ):
                $image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'single-post-thumbnail' );
                echo '<div class="img_class"><img src="'.$image[0].'" /></div>';
                endif;
                echo '<div class="post_content">'.get_the_content().'</div>';
                echo '</div>';

                echo '<div class="item '.$cat_str.'">'.get_the_title().'</div>';              

            endwhile; // End of the loop. ?>
            </div>
        </div>
        </div>
<?php wp_reset_query();
     else:
      // No, we don't have any posts, so maybe we display a nice message
      echo "<p class='no-posts'>" . __( "Sorry, there are no posts at this time." ) . "</p>";
     endif;
?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_footer();

包括thic boostrap file header.php文件：

<script type="text/javascript">

    var $grid = jQuery('#grid').isotope({
      itemSelector: '.item',
      layoutMode: 'packery',
    });

    jQuery(function() {
      var $buttons = jQuery('#filter-menu button');
      $buttons.on('click', function() {
        var filterValue = jQuery(this).attr('data-filter');
        jQuery(this).addClass('active').siblings().removeClass('active');
        $grid.isotope({
          filter: filterValue
        });
      });
    });

    jQuery(window).on('load',function(){
        jQuery('#grid').find('.item').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    });
    jQuery('button.row-btn').on('click',function(){
        setTimeout(function(){
            jQuery('#grid').find('.item').removeClass('selected');
        jQuery('#grid').find('.item:visible').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    },1000);
    });
        jQuery(document).on('click','div.item',function(){  
            console.log('Load: ',firstElement);
            jQuery('#grid').find('.item').removeClass('selected');
            jQuery(this).addClass('selected');
            var firstElement = jQuery(this).prev().html();

            jQuery('#content_section').html(firstElement);

    });
    </script>

在footer.php文件中包括以下js文件：

<script type="text/javascript">

    var $grid = jQuery('#grid').isotope({
      itemSelector: '.item',
      layoutMode: 'packery',
    });

    jQuery(function() {
      var $buttons = jQuery('#filter-menu button');
      $buttons.on('click', function() {
        var filterValue = jQuery(this).attr('data-filter');
        jQuery(this).addClass('active').siblings().removeClass('active');
        $grid.isotope({
          filter: filterValue
        });
      });
    });

    jQuery(window).on('load',function(){
        jQuery('#grid').find('.item').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    });
    jQuery('button.row-btn').on('click',function(){
        setTimeout(function(){
            jQuery('#grid').find('.item').removeClass('selected');
        jQuery('#grid').find('.item:visible').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    },1000);
    });
        jQuery(document).on('click','div.item',function(){  
            console.log('Load: ',firstElement);
            jQuery('#grid').find('.item').removeClass('selected');
            jQuery(this).addClass('selected');
            var firstElement = jQuery(this).prev().html();

            jQuery('#content_section').html(firstElement);

    });
    </script>

并将脚本放入footer.php文件：

<script type="text/javascript">

    var $grid = jQuery('#grid').isotope({
      itemSelector: '.item',
      layoutMode: 'packery',
    });

    jQuery(function() {
      var $buttons = jQuery('#filter-menu button');
      $buttons.on('click', function() {
        var filterValue = jQuery(this).attr('data-filter');
        jQuery(this).addClass('active').siblings().removeClass('active');
        $grid.isotope({
          filter: filterValue
        });
      });
    });

    jQuery(window).on('load',function(){
        jQuery('#grid').find('.item').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    });
    jQuery('button.row-btn').on('click',function(){
        setTimeout(function(){
            jQuery('#grid').find('.item').removeClass('selected');
        jQuery('#grid').find('.item:visible').first().addClass('selected');
        var firstElement = jQuery('#grid').find('.item.selected').prev().html();
        console.log('Load: ',firstElement);
        jQuery('#content_section').html(firstElement);
    },1000);
    });
        jQuery(document).on('click','div.item',function(){  
            console.log('Load: ',firstElement);
            jQuery('#grid').find('.item').removeClass('selected');
            jQuery(this).addClass('selected');
            var firstElement = jQuery(this).prev().html();

            jQuery('#content_section').html(firstElement);

    });
    </script>

var$grid=jQuery（'#grid'）。同位素({
itemSelector:“.item”，
布局模式：“打包机”，
});
jQuery（函数（）{
var$buttons=jQuery（“#过滤器菜单按钮”）；
$buttons.on（'click'，function（）{
var filterValue=jQuery（this.attr（'data-filter'）；
jQuery（this）.addClass（'active'）.sides（）.removeClass（'active'）；
$grid.com({
过滤器：过滤器值
});
});
});
jQuery（window）.on（'load'，function（））{
jQuery（'#grid'）.find（'.item'）.first（）.addClass（'selected'）；
var firstElement=jQuery（'#grid'）.find（'.item.selected'）.prev（）.html（）；
log（'Load:'，firstElement）；
jQuery（'#content_section'）.html（firstElement）；
});
jQuery（'button.row btn'）。在（'click'，function（）上{
setTimeout（函数（）{
jQuery（“#grid”）.find（“.item”）.removeClass（'selected'）；
jQuery（'#grid'）.find（'.item:visible'）.first（）.addClass（'selected'）；
var firstElement=jQuery（'#grid'）.find（'.item.selected'）.prev（）.html（）；
log（'Load:'，firstElement）；
jQuery（'#content_section'）.html（firstElement）；
},1000);
});
jQuery（document）.on（'click'，'div.item'，function（）{
log（'Load:'，firstElement）；
jQuery（“#grid”）.find（“.item”）.removeClass（'selected'）；
jQuery（this.addClass（'selected'）；
var firstElement=jQuery（this.prev（）.html（）；
jQuery（'#content_section'）.html（firstElement）；
});

截图：

---

我试过了，我想你应该使用同位素过滤器库，因为，@GufranHasan过滤没问题，实际上我无法对齐左侧的子内容。左侧的子内容是指？@GufranHasan根据图片右侧部分是过滤内容，左侧部分为每个内容的子内容分配，例如：当我悬停过滤器1内容C时，我需要在左侧部分显示过滤器1内容C的子内容。请尝试此解决方案，因为它在我这边工作。非常感谢，我会的check@Sarbaz，好的，当然，如果它有效，那么请让我知道。是的，当然，我会让你知道：）