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

Question

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.

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.

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

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

The Masonry documentation suggests using 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 );
});