html - 同位素过滤自定义样式问题

我需要像下图那样设计同位素过滤器。

同位素过滤jQuery可以做到这一点吗？
注：我已经在我的WordPress网站上实现了同位素过滤。所有筛选器都是自定义文章类型类别，右侧内容（筛选器1内容A、筛选器1内容B等）是文章类型标题，左侧内容是自定义文章类型内容。

最佳答案

请遵循以下步骤：
1.创建一个名为template-isotope-grid.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();

从admin创建一个页面，然后从右侧选择您创建的模板Isotope Grid View。请参见屏幕截图。

将此css放入style.css文件：

button {
  cursor: pointer;
  border: none;
  background: none;
}
#filter-menu {
  padding: 20px 0;
  text-align: center;
}
button:focus {
  outline: 0;
}

button.active {
  background: grey;
}

#grid {
  width: 100%;
}

#grid .item {
     position: unset !important;
    left: unset !important;
    top: unset !important;
}
.item.selected {
    font-weight: bold;
}

包含thic boostrap file header.php文件：
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
在footer.php文件中包含这些js文件：
https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js
https://cdn.jsdelivr.net/isotope.packery/1.3.2/packery-mode.pkgd.min.js
并将脚本放在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>

截图：

关于html - 同位素过滤自定义样式问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51240101/