事件不会在初始加载触发(Event does not trigger on the initial

这是从我关于其他问题的延续不断变化的媒体屏幕使得格覆盖

这个问题与相关的同位素。从@Robin卡罗Catacutan帮助下，我有以下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 class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

  $container.on( 'arrangeComplete',
  function( event, filteredItems ) {
    console.log( 'Isotope arrange completed on ' +
      filteredItems.length + ' items' );
  }
);

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $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;
  });

});

我想你把重点放在哪里，它应该在过渡完成后添加类的部分：

  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

据@Robin卡罗Catacutan有一个与arrangeComplete问题。事件arrangeComplete不会在页面初始加载触发。

同位素已经被加载的functions.php的开头：

//Isotope
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

我发布我的最新的帖子中所有的PHP如果你发现任何可疑的东西：

<?php 

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '-1',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 

?>
<?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");
            $termsString = "";
                foreach ( $termsArray as $term ) { 
                    $termsString .= $term->slug.' ';
                }
        ?>               
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <div class="content grid lefttext">
                <figure class="effect-lily">
                    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
                    <figcaption>
                        <div>
                            <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                            <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                        </div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                    </figcaption>           
                </figure>     
            </div> 
        </div>
        <?php endwhile;  ?>
    </div>
<?php endif; ?>

然而，这是直接关系到问题的最重要的部分：

<div class="<?php echo $termsString; ?> item col-md-4"> 
     <div class="content grid lefttext">
          <figure class="effect-lily">
          <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
              <figcaption>
                  <div>
                       <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                       <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                  </div>
                  <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
               </figcaption>            
          </figure>     
     </div> 
</div>

不知道是否有关，但我所用与此相关的问题的总结：

WordPress的
同位素
引导

我曾尝试：

改变正在加载的isotope.js其中的顺序。试了包括它的头部，身体标记的关闭等之前。
在网上搜索了类似的问题（未找到）
重命名$container到$grid
改变什么元素addClass将会影响

该页面可以找到这里。

你有一个工作的解决方案或任何想法？

在Android景观Streched图片：

有一件事你应该尝试（这关系到你的第一个问题为好），因为你的加载图像，是使用imagesloaded.js 。这将允许同位素被启动，这将消除重叠之前的所有图像加载在这里看到。我不理解为什么你需要添加类“imgArranged”使用JavaScript，如果它是在一个@media查询？

var $container = $('#isotope-list'); //The ID for the list with all the blog posts

 $container.imagesLoaded( function() {
 $container.isotope({ //Isotope options, 'item' matches the class in the PHP
 itemSelector: '.item',
 layoutMode: 'masonry'
 });
 });

附录

问题是你加载jQuery的两倍，2个不同的版本。你需要选择一个。如果你选择2.1.4，您不使用查询的迁移

这首先加载：

 <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>    
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/less.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>
  <script src="//use.typekit.net/xti5sne.js"></script>

这个加载后：

<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.pkgd.min.js?ver=1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js?ver=1'></script>