我遇到了一些麻烦,而不是初期化.我的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 举报,一经查实,本站将立刻删除。