php – 按下href后重新初始化砌体/同位素#/

我遇到了一些麻烦,而不是初期化.我的div有不同的高度,所以我使用Masonry和Isotope让它们正确显示.所有这些div都有类.item

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

按下Nyhende或Plus图标.你可以看到div正在加载到彼此之上.它们也被推到了页面的后面.这是因为当按下链接时,砌体没有被初始化.

如果您调整浏览器窗口的大小,您将看到正在重新启动砌体,并且所有物品都会直接移动到正确的位置.

问题是,砌体没有被以下物质重新开发：

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

有任何想法吗？

期待着听到您的意见,

解决方法:

通过向链接添加id解决了问题.然后我用砌体容器替换了同位素列表.然后我在页脚中添加了一个重新加载砌体的函数.

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

标签：php,html,masonry,jquery-isotope
来源： https://codeday.me/bug/20190710/1428313.html