重新初始化砌体/同位素后按下href＃/

Question

我有一些麻烦，而不是初步化的泥工。我的div有不同的高度，所以我使用Masonry和Isotope使它们正确显示。所有这些div都有.item

请参阅网站：http://www.dokfilm.no/并向下滚动到Nyhende。

通过按Nyhende或加号图标。你可以看到divs被加载到彼此之上。他们也被推到页面的后面。这是因为砌体在按下链接时不会被初始化。

如果调整浏览器的窗口，你会看到，砌体被reinitilized和所有项目都直接移动自己正确的位置。

的问题是，砌体没有被以下reinitilized：

<a href="#/ "title="Artiklar" data-target="#" class="nodec"> 
    <div class="expander"> 
     <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
     <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
     <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
    </div> 
</a> 

这里有更多的PHP如果需要的话。 artikler2.php是帖子被加载的地方。

PHP

<div class="clearfix"> 
    <a id="artikler"></a> 
    <section id="artikler" class="section artikler"> 
     <div class="blacktext"> 
      <div class="container"> 
       <div class="col-md-12 solidborderned bittelittpaddingoppned littpaddingned bittelittluft"> 
        <a href="#/ "title="Artiklar" data-target="#" class="nodec"> 
         <div class="expander"> 
          <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
          <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
          <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
         </div> 
        </a> 

        <div id="event-info" class="text littluft"> 
         <div class="row"> 
          <div class="col-md-12">        
           <?php include 'artikler2.php' ?> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

PHP

<div id="isotope-list"> 
     <div class="row"> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>    
     <div class="item col-md-6 littluft"> 

       <div class="black content grid lefttext maximg littluft"> 
        <a href="<?php the_permalink() ?>"> 
         <?php if (has_post_thumbnail()) { the_post_thumbnail('event_thumb'); } ?> 
        </a> 
        <div class="red padding"> 
         <h2 class="whitetext nomargin"><?php the_title(); ?></h2> 
         <span class="whitetext thin"> 
          <?php the_time('j. F Y') ?> 
         </span><br/> 
         <span class="whitetext thin"> 
          <?php 
           $content = get_post_field('post_content', get_the_ID()); 
           $content = preg_replace('/<[\/]?b>/i', '', $content); 
           $content_parts = get_extended($content); 
           echo $content_parts['main']; 
          ?> 
         </span> 
         <div class="whitelink"><a href="<?php the_permalink() ?>">Les mer</a></div> 
        </div> 
       </div> 
      </a> 

     </div> 
     <?php endwhile; ?> 
     </div> 
    </div> 

PHP页脚

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script> 

<script> 

(function($) { 

    var $container = $('.masonry-container'); 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      columnWidth: '.item', 
      itemSelector: '.item' 
     }); 
    }); 

    //Reinitialize masonry inside each panel after the relative tab link is clicked - 
    $('a[data-toggle=tab]').each(function() { 
     var $this = $(this); 

     $this.on('shown.bs.tab', function() { 

      $container.imagesLoaded(function() { 
       $container.masonry({ 
        columnWidth: '.item', 
        itemSelector: '.item' 
       }); 
      }); 

     }); //end shown 
    }); //end each 

})(jQuery); 
</script> 

Isotope.js

jQuery(function($) { 

    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' 
    }); 
}); 

任何想法？

期待收到你的来信，

Answer 1

问题通过添加id到链路解决。然后我用masonry-container替换类isotope-list。然后我在页脚中添加了一个重新加载砌体的函数。

HTML

<a href="#" title="Artikler" data-target="#" data-toggle="tab" class="nodec" id="nyhendeartiklar"> 
    <div class="expander"> 
      <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
      <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
      <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
    </div> 
</a> 



<div id="event-info" class="text littluft"> 
     <div class="row masonry-container"> 
      <div class="col-md-12">        
        <!-- Loop comes here --> 
      </div> 
     </div> 
</div> 

的jQuery在页脚：在控制台＃/`：

$(document).on("click", "#nyhendeartiklar", function() { 
    $container.masonry('reloadItems').masonry(); 
    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 
});