jQueryを使った石積みの不均一グリッド

Question

問題があり、皆さんが私を助けてくれることを願っていました。

私が取り組んでいるプロジェクトでは、WordPressテンプレートで不均一なグリッドを作成したいと考えています。グリッドでは、私はDesandroのMasonry.jsを使用しています。これは、柔軟なグリッドを作成するための素敵なライブラリです。

現在、私のようなので、まっすぐ水平グリッドとして表示されているすべてのワードプレスのコンテンツを持っている：

uneven grid

を：

even 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クラスの絶対位置指定を使用して要素をtop：0pxおよびleft：0％に配置します。グリッド内の不均一な要素の上に、たとえば40ピクセルの上から要素を開始する代わりに、石積みを作成することは可能でしょうか？グリッドを効果的に不均一にするには？

通常、私は単にグリッドの左側を追加のマージントップのコンテナ内にカプセル化しますが、残念ながらそれを達成できませんでした。また、グリッドの不揃いな子どもたちをCSSを使って追加のマージン・トップに設定しようとしましたが、それは役に立たなかったでしょう（これはおそらく絶対的な位置付けと関係しています）。

私は何時間もこのことを騒がしています。誰かが私を助けることができたら本当に感謝します！

ありがとうございました！

更新： 絶対配置を使用するライブラリのため、CSS編集は効果がありません。最初の要素の先頭を上に設定するjQueryのハッキングが必要になると仮定します。上の部分の代わりに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を記述して、左の列グリッド要素のtopの位置を見つけて変更する必要があります。