jQuery 的砌体不均匀网格

Masonry uneven grid with jQuery

我有一个问题,希望你们能帮助我;

对于我正在进行的项目,我想在 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 class 上使用绝对定位来定位元素从顶部:0px 到左侧:0%。是否有可能在网格内的不均匀元素上使用砌体而不是从 40px 顶部开始元素?让网格有效不均匀?

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

我已经为此烦恼了好几个小时了。如果有人能帮助我,我将不胜感激!

谢谢!

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

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

如果网格元素没有按预期顺序呈现,您可能需要修改Masonry.js或自己编写JS来查找和修改左列网格元素的top定位。

好的,所以我最终通过添加以下 jQuery:

找到了解决方案
jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );

希望对大家有所帮助!

谢谢大家