使用 jQuery 砌体不均匀网格

Question

我有一个问题，希望你们能帮助我；

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

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

even grid

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

uneven grid

为了让您了解我目前如何设置网格，这里有一段代码：

我在大部分网格显示中使用以下 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 和左侧：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' );

希望它对某人有所帮助！

谢谢大家。