事件不会在初始加载时触发

这是关于更改媒体屏幕使div叠加的另一个问题的延续

此问题与Isotope有关 。 在@Robin Carlo 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 Carlo Catacutan的说法,arrangeComplete存在问题。 事件arrangeComplete不会在页面的初始加载时触发。

同位素正在函数的开头加载.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' ); 

我发布了最新post中的所有php,以防您发现任何可疑内容:

  (array( 'foto', 'video', 'web' )), 'posts_per_page' => '-1', 'post_taxonomy' => 'any', ); $the_query = new WP_Query($args); ?> have_posts() ) : ?> 
have_posts() ) : $the_query->the_post(); $termsArray = get_the_terms( $post->ID, "category"); $termsString = ""; foreach ( $termsArray as $term ) { $termsString .= $term->slug.' '; } ?> <div class=" item col-md-4">

true) )); ?> / true) )); ?>

<a href="https://stackoverflow.com/questions/31624836/event-does-not-trigger-on-the-initial-load/" rel="bookmark" class="smoothtrans">Se prosjekt

但是,这是与问题直接相关的最重要的部分:

 <div class=" item col-md-4"> 

true) )); ?> / true) )); ?>

<a href="https://stackoverflow.com/questions/31624836/event-does-not-trigger-on-the-initial-load/" rel="bookmark" class="smoothtrans">Se prosjekt

不确定是否相关,但作为我正在使用的与此问题相关的摘要:

我试过的:

该页面可以在这里找到。

您有工作解决方案或任何想法吗?

Android横向上的Streched图像:

在此处输入图像描述

有一件事你应该尝试(这也与你的第一个问题有关),因为你加载图像,就是使用imagesloaded.js 。 这将允许在启动同位素之前加载所有图像,这将消除重叠。 请参见此处 。 我不明白为什么你需要使用javascript添加类“imgArranged”,如果它在@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' }); }); 

ADENDUM

问题是你加载jQuery两次,2个不同的版本。 你需要选一个。 如果选择2.1.4,则不使用query-migrate

首先加载:

       

这之后加载:

     
Interesting Posts