Html 同位素+；Wordpress布局模式

我很难在wordpress中设置同位素布局模式。我要做的是创建一个2柱网格，如中所示。到目前为止，我成功地完成了分类过滤工作。我唯一遇到的问题是在2列网格中获得响应图像，如示例中所示。这就是我到目前为止所做的：

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>

同位素.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 */

---

要做的第一件事是为wordpress创建一个图像大小，使图像具有相同的高度和宽度属性

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

请注意，您需要重新加载图像，以便在媒体库中创建新的图像大小

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

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

---

我建议在尝试合并到Wordpress之前，先创建布局并在静态HTML中实现完美。谢谢你的建议，但是现在当我在firefox或safari中加载我的页面时，我看到我的图片彼此堆叠在一起。当我过滤它们或者点击所有的图片时，我以前见过这种行为。这是一个当同位素在图像完全下载之前激发时发生的错误。您可以通过使用图像加载插件修复此问题。好的，谢谢你的文档！我稍后会去看看

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