javascript - 砌体/动态幻灯片高度问题

Question

我对正在进行的项目的后续步骤感到有些困惑，希望您能给我一些想法/帮助。

http://goo.gl/4d72h

我使用的是 Wordpress，结合了 Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) 和 Masonry (http://masonry.desandro.com/index .html) 来创建该项目的登陆页面。

正如您通过访问该站点所看到的，每个“帖子”都包裹在一个 grid_6 float 中，每行允许两个 float ，然后我使用砌体将所有内容按原样放置在一起。我将砌体代码包装在 (window).load 函数中，等待所有特色图像加载完毕，然后开始砌体。非常简单。

    <script>
    $(window).load(function(){
    var $container = $('.masonry-cont-area');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.single-fg-post'
      });
    });
});
    </script>

但是，砌体仅考虑第一张特征图像的定位等。如果您单击图像或点，它将前进到下一张高度可以更长或更短的图像，即造成一些问题。因为砌体已经发生，它与下一篇文章重叠等。当您单击上面给出的链接上的图像时，您可以明白我的意思。

那么，我今天要解决的问题是关于如何解决这个问题的任何想法？砌体可以从幻灯片中最高的图像中获取高度吗？单击图像时它可以动态变化吗？我可以确保绝对定位的项目始终在底部留出边距吗？

如有任何想法，我们将不胜感激。

谢谢大家，理查德

Answer 1

您的幻灯片插件似乎没有公开任何事件 Hook 。所以你将不得不以冗长的方式来做..

将初始化砌体插件的代码更改为

$(window).load(function(){
    var $container = $('.masonry-cont-area');

    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.single-fg-post',
            isAnimated: true // added this line to make the resizing of the masonry animated and not instant..
        });

        // whenever we click on a bullet element
        $('.pager').on('click','.bullet', function(){
            // we use timeout to delay the redrawing of masonry
            // because the slideshow takes sometime to fade out the current slide
            // and slide in the new one..
            // We have to wait until the slideshow has completed its transition before
            // redrawing masonry, so that the masonry plugin can use the new slide's dimensions..
            setTimeout(function(){
                // we make masonry recalculate the element based on their current state.
                $container.masonry();
            }, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw..
        });
    });
});

现场观看 http://jsfiddle.net/XjVWN/embedded/result/