Isotope + Wordpress 布局模式

Question

我很难在 wordpress 中设置同位素布局模式。我要做的是创建一个 2 列网格，如 this example 所示。到目前为止，我设法让同位素与过滤类别一起工作。我唯一遇到的问题是在示例中看到的 2 列网格中获取响应式图像。这是我目前所拥有的：live example

index.php

<div class="container-fluid">
<div class="container-moving">

  <div class="row">
    <div class="col-xs-12 col-sm-6">
<?php $the_query = new WP_Query( 'posts_per_page=50' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
    $termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
    $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
            $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }
    ?> 
    <div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
            <?php if ( has_post_thumbnail() ) { 
                      the_post_thumbnail();
                } ?><br>
                <?php the_title(); ?>
    </div> <!-- end item -->
    <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
<?php endif; ?>
    </div>

同位素.js

jQuery(function ($) {

 var $container = $('#isotope-list'); //The ID for the list with all the blog posts
 $container.isotope({ //Isotope options, 'item' matches the class in the PHP
 itemSelector : '.item', 
   layoutMode : 'masonry', });

 //Add the class selected to the item that is clicked, and remove from the others
 var $optionSets = $('#filters'),
 $optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
 var $this = $(this);
 // don't proceed if already selected
 if ( $this.hasClass('selected') ) {
   return false;
 }
 var $optionSet = $this.parents('#filters');
 $optionSets.find('.selected').removeClass('selected');
 $this.addClass('selected');

 //When an item is clicked, sort the items.
 var selector = $(this).attr('data-filter');
 $container.isotope({ filter: selector });

 return false;
 });

});

同位素.css

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;

}

.item {

}


.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
/* End: Recommended Isotope styles */

Answer 1

首先要做的是为 wordpress 创建一个图像大小，以强制图像具有相同的高度和宽度属性。

add_image_size( 'masonryLayout', 300, 300, true );

请注意，您需要重新上传图片才能在媒体库中创建新的图片尺寸。

然后你会想要强制 .item div 为 50% 宽度。 img 标签需要填充 .item 容器。

.item{
     width: 50%
}
.item img{
    width: 100%;
    height: auto;
}