Php 只有在调整窗口大小后，砌体才能正常工作

地点：

当图像加载到项目剖面时，砌体将其重叠到下一个剖面中。当你调整窗口大小并返回时，它看起来很好——就像在我的XAMPP站点上一样

下面是包含砌体部分的项目部分所使用的HTML代码（砌体部分未使用JS）。我使用WordPress和Zurb基金会（基于一个名为PoundPress的模板）。

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

项目



哎呀，没有帖子。

---

我不知道为什么它的行为不同，现在该网站的生活。任何帮助都将是惊人的。如果我需要发布更多代码，也请告诉我。谢谢

您正在描述的一个非常常见的问题是，砖石结构在何处设置了元素，但您的图像尚未加载

砌体文档建议使用

imagesLoaded（）

---

请仔细阅读您决定使用的插件的文档。太棒了，我会尽快查看！谢谢你的提示！这让我找到了正确的方向。当我使用这段代码时，我在svg加载方面遇到了问题，所以我没有使用imagesLoaded（），而是使用了这段代码：

$（document.ready（function（）{var container=document.querySelector（'#container'）；var msnry=new massiness（container，{itemSelector:'.item'}）；}）
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
  msnry = new Masonry( container );
});