砌体中的图像彼此叠加的原因可能是什么？

Question

我正在为 Wordpress 网站使用 masonry image gallery plugin。

图像突然开始出现在彼此之上。我认为这与插件本身无关，因为它之前工作正常。但是我不得不更改一些 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

这是因为在图像全部加载之前正在构建 Masonry 网格。您还需要调用 imagesloaded 库。

您还没有发布实例化砌体的 JS，所以我不能给您一个确切的例子，但是 link 关于它的 Masonry 网站是这样的：https://masonry.desandro.com/layout.html#imagesloaded

我会用第二个例子：

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

砌体中的图像彼此叠加的原因可能是什么？

What could be the cause for images in masonry appearing on top of each other?

wordpress

twitter-bootstrap-3

masonry