Question

我使用FacetWP构建过滤器表单。不幸的是，当我在表单中选择任何选项时，我的masonry布局正在制动。结果显示为单列而不是3.奇怪的是F5使顺序（3列）正确我试图使用这些方法：https://facetwp.com/documentation/template-configuration/和这个方法：https://facetwp.com/using-facetwp-with-existing-template-files/

我的代码是

        <div id="primary" class="content-area col-md-9 <?php echo sydney_blog_layout(); ?>">
        <main id="main" class="post-wrap" role="main">


        <?php
        $args = array(
            'post_type' => 'nieruchomosci',
            'posts_per_page' => 12,
        );
        $query = new WP_Query( $args );?>
        <?php if ( $query->have_posts() ) : ?>

            <header class="page-header">
                <h3 class="archive-title">Szukaj nieruchomości</h3>
            </header><!-- .page-header -->
                <div class="wyszukiwarka"><?php echo facetwp_display( 'facet', 'rodzaj' ); ?><?php echo facetwp_display( 'facet', 'typ' ); ?><?php echo facetwp_display( 'facet', 'lokalizacja' ); ?></div>
            <div class="posts-layout facetwp-template">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php if ( has_post_thumbnail() && ( get_theme_mod( 'index_feat_image' ) != 1 ) ) : ?>
        <div class="entry-thumb">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('sydney-large-thumb'); ?></a>
        </div>
    <?php endif; ?>

    <header class="entry-header">
        <?php the_title( sprintf( '<h2 class="title-post entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header><!-- .entry-header -->

    <div class="entry-post">
                <?php the_field('cena'); ?> PLN | <?php the_field('powierzchnia'); ?> m<sup>2</sup></br>
                <?php echo get_the_term_list( $post->ID, 'rodzaj', '', ', ', '' ) ?> na <?php echo get_the_term_list( $post->ID, 'typ', '', ', ', '' ) ?> w miejscowości <?php echo get_the_term_list( $post->ID, 'lokalizacja', '', ', ', '' ) ?>
        <?php
            wp_link_pages( array(
                'before' => '<div class="page-links">' . __( 'Pages:', 'sydney' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-post -->

    <footer class="entry-footer">
        <?php sydney_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->

            <?php endwhile; ?>
            </div>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

任何建议都会非常好。

Answer 1

尝试在facetwp-loaded事件上重新加载布局。从您的问题来看，不清楚如何创建砌体布局。假设它是masonry.js，你可以在FacetWP完成加载时进行布局：

$(document).on('facetwp-loaded', function() {
    // do layout when FacetWP finishes
    $grid.masonry('layout');
});

点击此处查看更多信息 https://facetwp.com/documentation/facetwp-loaded/

Answer 2

实际上我让他上班（使用Masonry PACKAGED v4.1.1＆amp; imagesLoaded PACKAGED v3.1.8）：

$(document).on('facetwp-loaded', function() {
    var $grid = $( '.grid' ).imagesLoaded( function() {
        $grid.masonry("reloadItems");
        $grid.masonry( {
            itemSelector : '.loop-entry',
            gutter       : 30,
            columnWidth  : 240,
            isAnimated   : true,
            animationOptions : {
                duration : 300,
                easing   : 'easeInOutCirc',
                queue    : false
            }
        });
    });
});

FacetWP正在制动砌体布局

2 个答案: