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' );
希望对大家有所帮助!
谢谢大家
我有一个问题,希望你们能帮助我;
对于我正在进行的项目,我想在 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' );
希望对大家有所帮助!
谢谢大家