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

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

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

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

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

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

任何想法都将不胜感激。

谢谢大家， 理查德

Answer 1

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

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

$(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/观看直播

Answer 2

您可以做的一件事是在图像更改时调用.masonry('reload')。