同位素+ 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> 

isotope.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; 
}); 

}); 

isotope.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; 
}