代码之家 › 专栏 › 技术社区 › touto

砖石结构中的图像相互重叠的原因是什么?

masonry twitter-bootstrap-3 wordpress

touto · 技术社区 · 7 年前

我用的是 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-## -->

1 回复 | 直到 7 年前

Peter HvD 7 年前

这是因为砖石网格是在图像加载之前构建的。您还需要致电 imagesloaded 图书馆

https://masonry.desandro.com/layout.html#imagesloaded

我将使用第二个示例:

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