重新初始化砌體/同位素後按下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(); 
    }); 
});