Masonry & jQuery 内容切换（slideDown、show 等）答案

【问题标题】：Masonry & jQuery content toggles (slideDown, show etc.)Masonry & jQuery 内容切换（slideDown、show 等）
【发布时间】：2012-02-12 16:14:23
【问题描述】：

我正在构建一个博客，我只想使用 Masonry 在有序的网格中显示每篇博客文章的相关图像。当用户单击图像时，博客文本内容将显示在图像下方（在同一页面上）。由于某种原因，当我添加点击功能时，隐藏的内容不会显示出来。我对 on() 事件处理程序（由于 Masonry 是必需的）不太熟悉，并且可能有一些明显的东西我遗漏了。发生的情况是我在 DOM 中看到元素得到 display: 块，但它们没有显示出来。

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(); ?>

JavaScript -

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);
    });

【问题讨论】：

你有一个网址，我可以看到真实的东西，用 css 和所有？我试过你的代码有和没有砖石，它的工作原理和我猜应该的一样，所以它可能是砖石和你的css的组合导致它......
是的 - staffanestberg.com/lesmarket

标签： jquery jquery-masonry

【解决方案1】：

您的 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});
            }
        });
    });
});

附：要查看上述代码是否正常工作，只需在控制台中运行代码并单击+。

【讨论】：

抱歉回复晚了。这是该网站的现场演示。正如你所看到的，有些东西阻止了文本内容下推下面的帖子 - staffanestberg.com/lesmarket

【解决方案2】：

不确定，但可以尝试使用 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;

【讨论】：

谢谢，但不幸的是我无法让它工作。如果您有时间，可以查看该网站的现场演示 - staffanestberg.com/lesmarket
我试过
它似乎有效。所以这是一个 CSS 问题。

【解决方案3】：

查看了您的网站，我相信您的问题是当您运行 .masonry() 并将所有元素设置为 position:absolute 时，Masonry 正在计算尺寸和位置，然后当您展开文本时，它将被隐藏通过下面的项目...

所以你需要在扩展一个项目后“更新”masonry()。我不太了解插件，但也许 $('#posts').masonry('reload');会成功的:)！

【讨论】：

我还没有想出如何解决这个问题，但你的建议是最接近解决方案的。感谢您指出 Masonry 中的这一重要方法。

【解决方案4】：

这相当简单 - 只需将以下 CSS 添加到您的文章标签中

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

Bang 的回答将带您完成 90% 的路程。

我也遇到了同样的问题，Bang 启发我尝试解决方案，但效果不佳，因此我对其进行了调整并解决了它以供我使用。

这就是我所做的：

是的，masonry 插件的“重新加载”功能就是您所需要的。

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

对我来说是：

$('#div-that-is-expanding').slideDown("slow", function(){ $('#container-for-masonry-tiles').masonry('reload'); }) ;

【讨论】：

【解决方案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(); ?>`

【讨论】：