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

Masonry/Dynamic Slideshow Height Issues

本文关键字：高度 问题 幻灯片 动态 砌体      更新时间：2023-09-26

我对我正在进行的项目的下一步有点困惑，希望你能给我一些想法/帮助。

http://goo.gl/4d72h

我正在使用Wordpress和Portfolio Slideshow Pro的组合(http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/)和砌体(http://masonry.desandro.com/index.html)以创建此项目的登录页。

正如你在现场看到的那样，每个"柱子"都包裹在一个网格_6浮子中，每排允许两个浮子，然后我用砖石把所有东西都放在一起。我已经将砌体代码封装在（window）.load函数中，等待所有特色图像加载完毕，然后它开始砌体。相当简单。

    <script>
    $(window).load(function(){
    var $container = $('.masonry-cont-area');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.single-fg-post'
      });
    });
});
    </script>

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

那么，我今天要做的是，有什么想法可以解决这个问题吗？砖石可以从幻灯片中最高的图像中获得高度吗？它能随着图像的点击而动态变化吗？我能确保底部总是有绝对定位项目的边距吗？

任何想法都将不胜感激。

谢谢大家，Richard

您的幻灯片放映插件似乎没有暴露任何事件挂钩。所以你必须用冗长的方式来做。。

将您初始化砖石插件的代码更改为

$(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/

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

相关文章：