我正在尝试使用同位素插件制作我的Wordpress主题。http://isotope.metafizzy.co/

到目前为止，有人建议我这样做，我得到了这样一个结果：

我认为同位素砌体不应该是这样的。我真的很困惑我做错了什么。下面是我的代码：

功能。php

 function profolio_scripts () {
    wp_enqueue_style( \'profolio-style\', get_stylesheet_uri() );
    wp_enqueue_script("isotope", get_template_directory_uri () . "/js/isotope.pkgd.min.js",array("jquery"));
    wp_enqueue_script("imagesLoaded",get_template_directory_uri () . "/js/imagesloaded.pkgd.min.js",array("jquery","isotope"));
    wp_enqueue_script("custom", get_template_directory_uri () . "/js/custom.js", array("jquery","imagesLoaded","isotope"));   
};
add_action("wp_enqueue_scripts", "profolio_scripts");

Javascript：

 jQuery(function($){
  var container=$("#isotope-container").imagesLoaded(function(){
      container.isotope({
        itemSelector: \'.item\',
        masonry:{
            columnWidth:160
        }
      })
   });
 });

CSS：

 .item {
    width:160px;
    margin: 1px;
 }
 #isotope-container {
    margin:0 auto;
    max-width:100%;
 }

以及在循环中工作的PhP代码。

<?php
  get_header();
?>
<div id="isotope-container" >
    <?php
     if(have_posts()) :
      while (have_posts()) : the_post();
        get_template_part("content");
      endwhile;
     endif;
    ?>
</div> <!--isotope-container-->

“内容”模板：

<div class="item">
  <?php
   if ( has_post_thumbnail() ) {
     $perm = get_permalink();
     $width = randomImageSize (200, 400);
     $height = randomImageSize (200, 400);
     $image = get_the_post_thumbnail($post_id, array($width,$height));
   }
  ?>
    <a href="<?php echo ($perm);?>"><?php echo ($image);?></a>
    <div class="imageDesc">This beautiful image </div>
</div>

我的猜测是，这个问题与imagesLoaded方法有关。正如截图所示，同位素的工作原理并不正确——图像之间有很多自由空间。

请帮助解决此问题

jQuery(document).ready(function($) {

    var $container = $(\'#your-id\');

    $container.isotope({
        layoutMode: \'masonry\',
        itemSelector : \'.your-class\',
        masonry: {
            columnWidth: 200,
        }
    });

    $container.imagesLoaded( function() {
        $container.isotope(\'layout\');
    });
});