与jQuery砌体不均匀网格

我有一个问题，并希望你们可以帮助我;与jQuery砌体不均匀网格

对于我正在进行的项目，我想在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(); ?> -->

现在我已经注意到该砌体在.grid-item类中使用绝对定位来定位来自top：0px和left：0％的元素。是否可以用砖石建筑物，例如从网格内不平坦的元素顶部40px开始，使电网有效参差不齐？

通常情况下，我只是简单地将网格的左侧封装在具有额外边距的容器内，但很遗憾，我一直无法实现这一点。我也尝试过使用CSS将网格的所有不平坦的子元素设置为额外的边距顶点，但这也无济于事（这可能与砌体的绝对定位有关）。

我一直在为这个小题目而烦恼。如果有人能够帮助我，那将非常感谢！

谢谢！

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

来源

2017-01-25 Extricate

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

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

希望它可以帮助别人！

谢谢大家。

来源

2017-01-26 22:37:02 Extricate

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

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

来源

2017-01-25 19:25:42

你好霍普金斯，谢谢你的建议！可悲的是，由于电网的绝对定位，这不起作用！也许你有其他建议？ – Extricate

@Extricate我没有意识到每个元素都是绝对定位的。电网总是两列吗？ –

与jQuery砌体不均匀网格

回答

相关问题