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

Question

我对接下来要做的项目的下一步感到困惑，希望你能给我一些想法/帮助。

http://goo.gl/4d72h

我使用WordPress和投资组合幻灯片临（http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/）和砌体（HTTP的组合：//砌筑.desandro.com/index.html）创建此项目的登录页面。

正如您通过访问该网站所看到的，每个'帖子'都包裹在一个grid_6浮动中，每行允许两个浮动，然后我使用砌体将所有东西放在一起。我已经在（窗口）.load函数中封装了砌体代码，等待所有特色图片加载完成，然后开始砌筑。非常简单。

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

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

然而，石工只是考虑到它的第一个特点Image的定位等，如果你点击图片，或者点，它会推进到一个新的图像可以是在或长或短身高，这是造成一些问题。因为砌体已经发生，它与下一个帖子重叠等等。当你点击上面给出的链接上的图像时，你可以看到我的意思。

那么，今天我追求的是如何解决这个问题的想法呢？砌体能够从幻灯片中最高的图像中获取高度吗？它可以随着图像被点击而动态变化吗？我可以确保底部的保证金始终是绝对定位的物品吗？

任何想法将非常感激。

感谢所有，你可以做 理查德

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')。