我遇到了一些麻烦,而不是初期化.我的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是正在加载帖子的地方.
<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>
<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(); }); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。