Question

我正在建立一个博客，我只希望使用Masonry在一个排列良好的网格中显示每篇博文的相关图像。当用户点击图像时，博客文本内容将显示在图像下方（在同一页面上）。由于某种原因，当我添加点击功能时，隐藏的内容将不会显示。我不熟悉on（）事件处理程序（因为Masonry而需要）并且可能有一些我不知道的东西。发生的事情是我在DOM中看到元素显示：阻止，但它们没有显示。

HTML -

<?php get_header(); ?>
        <div id="posts" class="clearfix">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <a class="view" href="#"><?php the_post_thumbnail(465, 999) ?></a>
                <div class="overlay">+</div>
                <article>
                    <a href="#" class="close">x</a>
                    <h1><?php the_title() ?></h1>
                    <hr>
                    <?php the_content() ?>
                    <span><?php the_date('Y/d/m') ?></span>
                </article>
            </div>
        <?php endwhile; endif;  ?>
        </div>
        <div class="navigation">
            <?php next_posts_link(); ?>
        </div>
<?php get_footer(); ?>

JavasScript -

var $container = $('#posts');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 475,
            isAnimated: true
        });
    });

    $(document).on("click", "a.view", function(){
        if(!$(this).parent().find('article').is(':visible')){
            $(this).parent().find('article').slideDown(250);
        }
        else {
            $(this).parent().find('article').slideUp(250);
        }
        e.preventDefault();
    });

    $(document).on("mouseover", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250);
    });
    $(document).on("mouseout", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250);
    });

Answer 1

不确定，但尝试使用live（）或类似的东西：

var $container = $('#posts');

$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.post',
        columnWidth: 475,
        isAnimated: true
    });
});

$(document).ready(function(){

    $("a.view").live("click", function(){
            if(!$(this).parent().find('article').is(':visible')){
                $(this).parent().find('article').slideDown(250);
            }
            else {
                $(this).parent().find('article').slideUp(250);
            }
            e.preventDefault();
        });

    $("a.view").live("mouseover", "a.view", function(){
          $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250);
        });

    $("a.view").live("mouseout", "a.view", function(){
          $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250);
    });

});

关于您网站的修改

尝试

<article style="display: block; z-index:1000;position:absolute;">

似乎显示文字。

如果要替换下一个块/图像，请使用position：absolute;

Answer 2

您的js代码似乎工作正常但唯一的问题是<article>标记与下面显示的其他图像重叠。您可以将此代码应用于+图标（当您悬停任何图像时），该图标将显示图像详细信息并向下按下图像。

$('div#posts > div.post > a.view').each (function (i) {
    $(this).click(function () {
        var articleHeight = $(this).siblings('article').show().height();
        $('div#posts > div.post').each (function (j) {
            if (i%2 == 0 && j%2 == 0 && j > i) {
                var currentTop = parseInt($(this).css('top'));
                $(this).css({top : currentTop + articleHeight});
            } else if (i%2 != 0 && j%2 != 0 && j > i) {
                var currentTop = parseInt($(this).css('top'));
                $(this).css({top : currentTop + articleHeight});
            }
        });
    });
});

P.S。要查看上述代码，请在控制台中运行代码，然后点击+。

Answer 3

看看你的网站，我相信你的问题是，当你运行.masonry（）并将所有元素设置为position：absolute时，砌体正在计算大小和位置，然后当你展开文本时它将被隐藏由...下面的项目。

因此，您需要在展开项目后“更新”masonry（）。我不知道插件那么好，但也许是$（'＃posts'）。masonry（'reload'）;会做的伎俩:)！

Answer 4

Bang的回答将带给你90％的路。

我也遇到了同样的问题，Bang鼓励我尝试解决方案而且它没有用，所以我调整了它并解决了它以供我使用。

这就是我的所作所为：

是的，砌体插件的'重载'功能是你需要的。

将它放在jquery动画效果的回调部分。

对我来说，它是：

$（'＃div-that-is-expanding'）。slideDown（“slow”，function（）{$（'＃container-for-masonry-tiles'）。masonry（'reload'）;}） ;

Answer 5

这很简单 - 只需将以下CSS添加到文章标签

即可

article {
   position: relative;
   z-index: 10;
}

这会将它置于其他图像之上。

Answer 6

您需要在完成slideUp时运行砌体重新加载。

.slideUp(400,function() {
    $('#container').masonry('reload');
});

Answer 7

如果它有帮助，我已经制作了一个模板，它使用了一个可以用作博客索引页面的WordPress模板的砌体布局。你可以看到它使用普通的CSS，你可以测试它并玩它，到目前为止，我使用它作为必须使用JQuery的替代方案，但很快我将更新这个以使用JQuery并添加很酷的功能。

`

<?php get_header(); ?>
    <style>
        @media all and (min-width: 676px) and (max-width: 1200px) {
            #list_blog {
            -moz-column-count: 2 !important;
            -moz-column-gap: 0px !important;
            -webkit-column-count: 2 !important;
            -webkit-column-gap: 0px !important;
            column-count: 2 !important;
            column-gap: 0px !important;
            }
        }
        @media all and (max-width: 676px) {
            #list_blog {
            -moz-column-count: 1 !important;
            -webkit-column-count: 1 !important;
            column-count: 1 !important;
            }
        }
    </style>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> ">
        <div class="x-container-fluid max width">
            <div id="blog_container">
            <div class="entry-content" id="list_blog"
                style=" -moz-column-count: 3;
                    -moz-column-gap: 0px;
                    -webkit-column-count: 3;
                    -webkit-column-gap: 0px;
                    column-count: 3;
                    column-gap: 0px;
                ">
                <?php query_posts( array( 'posts_per_page' => 15 ) ); ?>
                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                <div class="post_item" style="display: inline-block;background: #fff;border-radius: 5px;box-shadow: 3px 3px 10px #BBB;margin-right: 30px;width: 96%;margin-bottom: 15px;">
                <h4 class="post-heading" style="padding: 10px;margin-top: 0;margin-bottom: 10px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                <div class="blog-image"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?></a></div>
                <div class="content" style="padding: 10px;"><?php the_excerpt(); ?></div>

                </div>

                <?php endwhile; ?>
                <div class="navigation">
                    <span class="newer"><?php previous_posts_link(__('« Newer','example')) ?></span>
                    <span class="older"><?php next_posts_link(__('Older »','example')) ?></span>
                </div><!-- /.navigation -->
                <?php endif; ?>

            </div> <!-- end .entry-content -->

            </div><!--blog_container-->
        </div> <!-- .x-container-fluid.max.width -->
    </article> <!-- end .hentry -->

    <?php wp_reset_query(); ?>
<?php get_footer(); ?>`

砌体和jQuery内容切换（slideDown，show等）

7 个答案: