Question

我遇到了问题，并希望你们可以帮助我;

对于我正在处理的项目，我想在WordPress模板中创建一个不均匀的网格。对于网格，我使用的是Desandro的Masonry.js，它是一个可爱的库，用于创建灵活的网格。

目前，我将所有wordpress内容显示为直线水平网格，如下所示：

但是，我的最终目标是将网格显示如下：

为了让您了解我目前如何设置网格，这是代码的一大块：

我正在使用以下WordPress循环进行大部分网格显示：

<main id="main" class="site-main" role="main">   
<?php
if ( have_posts() ) :
    if ( is_home() && ! is_front_page() ) : ?>
        <?php
    endif;
    /* Start the Loop */
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content-masonry', get_post_format() );
    endwhile;
else :
    get_template_part( 'template-parts/content', 'none' );
endif; ?>

从以下内容部分中选择：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <a href="<?php echo get_permalink( $post->ID ); ?>">
        <div class="row">
            <div class="grid-item col-xs-12 col-sm-6 col-md-6 grid-item-content-background">
                <div class="grid-item-content-background">
                    <div class="front-page-grid-item-tag">
                    </div>
                    <div class="button-container">
                        <i class="fa-border-circle glyphicon glyphicon-chevron-right"></i>
                    </div>

                    <!-- post-tags -->
                    <div class="tags-container">
                    <?php $tags = wp_get_post_tags( $post->ID );
                        $html = '';
                        foreach ( $tags as $tag ) {
                            $tag_link = get_tag_link( $tag->term_id );        
                            $html .= "<div class='tag-display tag-icon-{$tag->slug}'></div>";
                        }
                        echo $html; ?>

                        <h4 class="front-page-category">
                            <?php foreach( (get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>

                        </h4>
                    </div>

                    <!-- .post-tags -->

                    <div class="grid-item-content">
                        <div class="grid-item-content-thumbnail" 
                             <?php 
                             if ( $thumbnail_id = get_post_thumbnail_id()) {
                                if ($image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg'))
                                    printf('style="background-image: url(%s);"', $image_src[0]);     
                             } ?>>
                            <div class="frontpage-overlay frontpage-overlay-trigger">
                                <div class="frontpage-article-text-container">
                                    <h2 class="front-page-title"><?php echo get_the_title(); ?></h2>
                                    <h3 class="front-page-subtitle">
                                        <?php { 
                                        $subtitle = get_post_meta ( $post->ID, 'subtitle', $single = true ); 
                                        if ( $subtitle !== '' ) echo $subtitle;
                                        elseif ( $subtitle == '' ) echo '<!-- no subtitle set -->'; } ?>

                                    </h3>
                                </div><!-- .front-page-article-text-container -->
                            </div><!-- .frontpage-overlay -->
                        </div><!-- .grid-item-content-thumbnail -->
                    </div><!-- .grid-item-content -->
                </div><!-- .grid-item-content-background -->
            </div><!-- .grid-item -->
        </div><!-- .row -->
    </a>
</article><!-- #post-<?php the_ID(); ?> -->

现在我注意到Masonry在.grid-item类上使用绝对定位来定位顶部元素：0px和left：0％。是否有可能有砌体而不是从网格内的不均匀元素上的40px顶部开始元素？使网格有效不均匀？

通常我会简单地将网格的左侧封装在一个带有额外边距顶部的容器中，但遗憾的是我无法实现这一点。我也尝试使用CSS将网格中所有不均匀的子项设置为额外的margin-top，但这也无济于事（这可能与Masonry的绝对定位有关）。

我几个小时都在忙着这件事。如果有人可以帮助我，那将非常感激！

谢谢！

更新：由于使用绝对定位的库，任何CSS编辑都是无效的。我假设我将需要一个jQuery hack，它将第一个元素的顶部设置为top：40px而不是top：0;但我不知道从哪里开始。如果有人能帮助我，我将非常感激！

Answer 1

您可以利用:nth-of-type() CSS选择器。如果这些元素按预期顺序呈现，则可以使用:nth-of-type(odd)选择第一列。添加margin-top:40px;以删除该列中的每个元素。

如果网格元素未按预期顺序呈现，则可能必须修改Masonry.js或编写自己的JS以查找和修改左列网格元素的top位置。

Answer 2

好的，所以我最终通过添加以下jQuery找到了解决方案：

jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );

希望它有所帮助！

谢谢大家。

使用jQuery进行砌体不平整网格

2 个答案: