Question

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

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

按 Nyhende 或加号图标。你可以看到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'
    });
});

有什么想法吗？

期待收到你的回复，

Answer 1

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

<强> 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后重新初始化砌体/同位素＃/

1 个答案: