自定义类别图库与砌体

Question

我有点迷失，我想要建立一个菜单，这个菜单是由帖子制作的，有类别＆＃34;画廊＆＃34;在淡入和淡出后，在每个帖子上显示带有砌效的画廊，效果为easeInOutQuad。淡入和淡出效果似乎有效，但砌体本身没有重建或重新加载似乎破碎

这是我的代码

<!-- this is for menu, I'm querying post which have category gallery-->
<div class="gallery-menu">
<?php 
$category = get_term_by('slug', 'gallery', 'category');
            $args = array(
            'category'        => $category->term_id,
            'orderby'         => 'post_date',
            'order'           => 'DESC',
            'post_type'       => 'post',
            'post_status'     => 'publish'
            );
            $test = get_posts( $args );
        ?>
        <ul id="gallery-menu">
            <?php 
            foreach($test as $post) {?>
                <li id="<?php echo $post->ID; ?>">
                    <a href="#"><?php echo $post->post_title; ?></a>
                </li>
            <?php } ?>
        </ul>
</div>

<!-- displaying gallery image on that post using advance custom field
 the masonry class for content is "gallery-content" and the list is class "item" -->
<div class="galls" id="gallery-content">
    <?php foreach($test as $post) {?>
        <div id="<?php echo $post->ID; ?>" class="content">
            <ul class="gallery-content">
            <?php while ( have_rows('gallery_content') ) : the_row(); ?>
                <li class="item">
                    <?php
                    $gallerylink = get_sub_field('gallery_picture'); 
                    ?>
                    <img src="<?php echo $gallerylink; ?>">
                </li>
            <?php endwhile; ?>
            </ul>
        </div>
    <?php } ?>
</div>


<!-- my javascript for displaying on click and for masonry -->
<script>
jQuery(document).ready(function() {
jQuery('#gallery-content').masonry({
          itemSelector: '.item',
          isFitWidth: true,
          isAnimated: true,
          animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
          },
          isAnimated: !Modernizr.csstransitions 
        });

    jQuery('#gallery-menu li a').click(function(e){

        hideContentDivs();
        var tmp_div = jQuery(this).parent().index();
            jQuery('.galls .content').eq(tmp_div).fadeIn();

     });
    function hideContentDivs(){
        jQuery('.galls .content').each(function(){
            jQuery(this).fadeOut();

        })
    }
});
</script>

毕竟我试图使用：

$('#gallery-content').masonry('reloadItems');
$('#gallery-content').masonry('reload');

但似乎一切都无法正常工作，图片已加载但位置不佳（位于同一位置），图片未加载或一切损坏。

当我点击图库中的菜单时，我的目的是什么，图库被重新加载到具有easeinOutQuad效果的砖石上

像这个网站示例：http://pawonpasundan.com/our-menus/

我需要帮助:(