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

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

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 浮点中，每行允许两个浮点，然后我使用砖石将所有内容按原样放置在一起。我将砌体代码包装在 (window).load 函数中，等待所有特色图像加载完毕，然后开始砌体。很简单。

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

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

然而，砌体只考虑了它的定位等第一个特征图像。如果你点击图像或点，它会前进到下一个高度可能更长或更短的图像，这会导致一些问题。因为砌体已经发生，它与下一篇文章等重叠。当你点击上面给出的链接上的图像时，你可以明白我的意思。

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

任何想法将不胜感激。

谢谢大家，
理查德

最佳答案

您的幻灯片插件似乎没有公开任何事件 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/ 现场观看

关于javascript - 砌体/动态幻灯片高度问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9775193/