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

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

我正在使用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>

$（窗口）。加载（函数（）{
变量$container=$（'.MARCHISE cont area'）；
$container.imagesLoaded（函数（）{
$container.com({
项目选择器：'.single fg post'
});
});
});

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

所以，我今天要说的是，有什么办法可以解决这个问题吗？砌体能否从幻灯片中最高的图像中获取高度？它能随着图像的点击而动态变化吗？我是否可以确保绝对定位的项目始终在底部留有余量

任何想法都将不胜感激

谢谢大家，

---

Richard

您可以做的一件事是在更改图像时调用

.massy（'reload'）

。

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

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

$(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..
        });
    });
});

---

在

查看现场直播，有没有关于如何操作的建议？我还在学习；）谢谢。您的幻灯片JavaScript是否允许您添加像

onChange

之类的回调？这太完美了。你得到赏金了！你能给我解释一下新增加的内容吗？我真的很感谢你在这里的帮助。非常感谢。哦，如果你点击图片，它也会推进幻灯片，所以无论如何我们也可以添加这个？这很酷，我只是对子弹和图片重复了同样的操作<代码>$（'.slideshow next'）。在（'click'，'.psp active'，function（）{setTimeout（function（）{$container.mashine（）；}，250）；}）但是解释一下

setTimeout

函数还是不错的。非常感谢。@Richard，这就是为什么理想的情况是，如果我们能够将我们的函数与某个事件挂钩，而该事件是在幻灯片进入下一张幻灯片时触发的。。（但插件不存在这样的规定…）在response…@GabyakaG.Petrioli中为代码添加注释你太棒了！