Question

我使用masonry image gallery plugin作为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

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

你还没有发布实例化砌体的JS，所以我无法给你一个确切的例子，但是这里有关于它的Masonry网站的链接：{{3} }

我使用第二个例子：

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

砖石中的图像出现在彼此之上的原因是什么？

1 个答案: