是什么原因导致了砖石中的图像出现在彼此之间？

Question

我正在使用一个砌体图片库插件一个Wordpress网站。

图像突然开始出现在对方的上方。我不认为这与插件本身有关，因为它以前运行得很好。但我不得不更改一些HTML/CSS代码，这可能与此有关。但我无法重建它。

它看起来是什么样子：

​

当然，内容区域应该与画廊一起扩展。这发生在像这样的几页上。我通过自定义字段提取图像，这只是一个画廊。

我应该去哪里寻找错误的来源？

<div class="container">
<!-- current start -->
<?php
$fields = CFS()->get('current');
foreach ($fields as $field) {
    echo '<div class="row"><div class="col-md-3 topmargin"><h2>'.$field['current_title'].'</h2></div>';
    echo '<div class="col-md-6 col-sm-9 topmargin2"><h1>'.$field['current_artist'].'</h1>';
    echo '<h4>'.$field['current_exhibition_title'].'</h4>';
    echo '<h3>'.date( 'j.m.', strtotime( $field['current_exhibtion_start'] ) ).' - '.date( 'j.m.Y', strtotime( $field['current_exhibition_end'] ) ).'</h3>';
    foreach ($field['where'] as $select => $label) {
        echo '<span class="h3-2">'.$label.'</div>';
    }
    if ( (in_category('MQ ART BOX')) || (in_category('MQ ART BOX EN')) ) {
        echo '<div class="col-sm-2 col-xs-9 topmargin2-6 textwidget3"><h5><img class="mqimg2" src="http://smolkacontemporary.at/wp-content/uploads/2016/10/mqlogo2.png?x16700"/> ART BOX</h5></div>';
    }
    echo '</div><div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-2">'.$field['current_text'].'</div></div>';
}
?>
<!-- current end -->
<!-- more start -->
<?php
$fields = CFS()->get('images');
$fields2 = CFS()->get('text_continued');

?>
  <?php if ( $fields ) : ?>

<div class="row>"><div class="col-md-3 topmargin"></div><div class="col-md-7 topmargin2-13">

        <?php echo $fields; ?>

        </div></div>
        <?php endif; ?>

            <?php if ( $fields2 ) : ?>
                <div class="row>"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-8">
      <?php echo $fields2; ?>

</div></div>
    <?php endif; ?>
        <!-- more end -->


<?php

$currentlang = get_bloginfo('language');
if ($currentlang=="de-DE") {
        $lang = 'Zurück';
        $lang1 = 'Übersicht';
} else {
        $lang = 'Back';
        $lang1 = 'Overview';
}

$values = CFS()->get('more');
  if (count($values) != 0) {
foreach ($values as $post_id) {
    $the_post = get_post($post_id);
    $link = get_permalink($post_id);
        $back = wp_get_referer();
    if ( $back != $link) {
        echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.$back.'" >'.$lang.'</a>&nbsp;<a class="btn btn-default" href="'.$link.'" >'.$lang1.' '.$field['current_artist'].'</a></div></div><br>';
    }
        else {
              echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.$back.'" >'.$lang.'</a></div></div><br>';
        }
} }

else {
        echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.wp_get_referer().'" >'.$lang.'</a></div></div><br>';
}

?>
</div>

</article><!-- #post-## -->

Answer 1

这是因为砖石网格是在图像加载之前构建的。您还需要调用图像加载库。

您还没有发布JS，它正在实例化砌体，所以我不能给您一个确切的例子，但是下面是关于它的砖石站点的链接：https://masonry.desandro.com/layout.html#imagesloaded

我用第二个例子：

var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
      // options...
  });
});