кладка работает только правильно после изменения размера окна

Question

кладка работает только правильно после изменения размера окна

Когда изображения загружаются в раздел проекта, кладка накладывается на следующий. Когда вы изменяете размер окна и обратно, оно выглядит нормально — как это было на моем сайте XAMPP.

Ниже приведен HTML-код, используемый для раздела проекта, в котором содержится часть масонства (не использовал JS для кладки). Я использую WordPress & Zurb Foundation (на основе шаблона под названием FoundationPress.) Я также использую масонство с блочной сеткой Foundation.

<div id="projects-section" class="row">
<h1 id="projects">PROJECTS</h1>
<div id="projects-divider"></div>
<div class="small-12 columns" role="main">
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>
<?php do_action( 'foundationpress_before_content' ); ?>
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">

<?php
$args = array('cat' => 'uncategorized',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_gets_posts' => 1
);
$category_posts = new WP_Query($args);

if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<li class="item">
<div class="post-thumbnail">
<a href="<?php the_permalink();?>"><?php if(has_post_thumbnail()){the_post_thumbnail();} ?></a>
</div>
<h2><?php the_title() ?></h2>
<div class='post-content'><?php the_content() ?></div>
<div class="post-divider"></div>
</li>

<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
</ul>
<?php do_action( 'foundationpress_after_content' ); ?>
</div>
</div>

Я не уверен, почему он ведет себя по-другому сейчас, когда сайт работает. Любая помощь будет потрясающей. Также дайте мне знать, если мне нужно разместить больше кода. Спасибо!

1

html masonry php wordpress zurb-foundation

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Очень распространенная проблема, которая звучит так, как вы описываете, — это когда Masonry настраивает ваши элементы, но ваши изображения еще не загружены.

Документация Masonry предлагает использовать imagesLoaded(),

http://masonry.desandro.com/appendix.html

var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});

3