與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(); ?> --> 

現在我已經注意到該砌體在.grid-item類中使用絕對定位來定位來自top：0px和left：0％的元素。是否可以用磚石建築物，例如從網格內不平坦的元素頂部40px開始，使電網有效參差不齊？

通常情況下，我只是簡單地將網格的左側封裝在具有額外邊距的容器內，但很遺憾，我一直無法實現這一點。我也嘗試過使用CSS將網格的所有不平坦的子元素設置爲額外的邊距頂點，但這也無濟於事（這可能與砌體的絕對定位有關）。

我一直在爲這個小題目而煩惱。如果有人能夠幫助我，那將非常感謝！

謝謝！

更新： 由於使用的庫使用絕對定位，所以任何CSS編輯都不起作用。我假設我需要一個jQuery hack，它將第一個元素的頂部設置爲頂部：40px而不是頂部：0;但我不知道從哪裏開始。如果有人能幫助我，那將會非常感謝！

Answer 1

好了，我終於找到了解決方案通過添加以下的jQuery：

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

希望它可以幫助別人！

謝謝大家。

Answer 2

您可能可以利用:nth-of-type() CSS選擇器。如果這些元素按照預期順序進行渲染，則可以使用:nth-of-type(odd)來選擇第一列。添加margin-top:40px;以刪除該列中的每個元素。

如果網格元素未按預期順序呈現，您可能需要修改Masonry.js或編寫自己的JS來查找和修改左列柵格元素的位置。