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

2019-07-10 22:30:17 阅读：295 来源： 互联网

我遇到了一些麻烦,而不是初期化.我的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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