砌体仅在调整窗口大小后才能正常工作

Question

网站：www.zrrdigitalmedia.com

在项目部分中加载图像时，砌体将其重叠到下一个。当您调整窗口大小并返回时，它看起来很好 - 就像它在我的 XAMPP 网站上所做的那样。

下面是包含砌体部分的项目部分的 HTML 代码（砌体没有使用 JS）。我正在使用 Wordpress 和 Zurb Foundation（基于名为 FoundationPress 的模板。）我还在使用带有 Foundation 块网格的 Masonry。

<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>

我不确定为什么网站上线后它的行为会有所不同。任何帮助都会很棒。如果我需要发布更多代码，也请告诉我。谢谢！

Answer 1

听起来像您描述的一个非常常见的问题是 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 );
});