Question

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

我正在使用Wordpress，以及Portfolio Slideshow Pro（http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/）和Masonry（http://masonry.desandro.com/index）的组合.html）创建这个项目的登陆页面。

正如您通过访问该网站所看到的，每个'post'都包含在grid_6 float中，每行允许两个浮点数，然后我使用砌体将所有内容放在一起。我已将砌体代码包装在（窗口）.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')。

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

2 个答案: