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

Site: www.zrrdigitalmedia.com

When images load in the project section masonry overlaps it into the next. When you resize the window and back it's looking fine - like how it did on my XAMPP site.

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

Below's the HTML code used for the project's section where the Masonry part is contained (didn't use JS for masonry). I'm using Wordpress & Zurb Foundation (based on a template called FoundationPress.) I'm also using Masonry with Foundation's block grid.

下面是用于项目部分的HTML代码,其中包含了Masonry部分(没有使用JS进行砌体处理)。我正在使用Wordpress和Zurb Foundation(基于一个名为FoundationPress的模板。)我也在使用Masonry和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>

I'm not sure why it's behaving differently now that the site's live. Any help would be amazing. Also let me know if I need to post more code. Thanks!

我不确定为什么现在该网站的现场表现不同。任何帮助都会很棒。如果我需要发布更多代码,也请告诉我。谢谢!

1 个解决方案

#1

A very common problem that sounds like you are describing is where Masonry sets up your elements but your images haven't loaded yet.

一个听起来像你正在描述的非常常见的问题是Masonry设置你的元素,但你的图像尚未加载。

The Masonry documentation suggests using imagesLoaded().

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 );
});

#1