按 href #/ 后重新初始化 Masonry / Isotope

Question

我遇到了 Masonry 未初始化的问题。我的 div 有不同的高度，所以我使用 Masonry 和 Isotope 来使它们正确显示。所有这些 div 都有 class .item

请查看站点：http://www.dokfilm.no/ 并向下滚动到 Nyhende。

通过按 Nyhende 或 加号图标。您可以看到 div 被加载到彼此之上。他们也被推到页面的后面。这是因为在按下 link.

时 Masonry 没有被初始化

如果您调整浏览器 window 的大小，您会看到 Masonry 正在重新初始化，所有项目都直接移动到正确的位置。

问题是 Masonry 没有被以下各项重新初始化：

<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

通过向 link 添加 id 解决了问题。然后我用 masonry-container 替换了 class 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();
    });
});

按 href #/ 后重新初始化 Masonry / Isotope

Reinitialize Masonry / Isotope after pressing href #/

html

php

jquery-isotope

masonry