砌体/动态幻灯片高度问题
我对接下来正在进行的项目的后续步骤感到困惑，希望你能给我一些想法/帮助。
http://goo.gl/4d72h
我正在使用Wordpress，以及Portfolio Slideshow Pro（http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/）和Masonry（http://masonry.desandro.com/index.html）的组合创建此项目的登录页面。
正如您通过访问该网站所看到的，每个’post’都包含在grid_6 float中，每行允许两个浮点数，然后我使用砌体将所有内容放在一起。 我已将砌体代码包装在（窗口）.load函数中，等待所有特色图像都加载后再启动砌体。 很简单。
$(window).load(function(){ var $container = $('.masonry-cont-area'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.single-fg-post' }); }); }); 然而，砌体只考虑了它的定位等第一个特征图像。如果单击图像或点，它将前进到下一个可能更长或更短的图像，这会导致一些问题。 因为砌体已经发生，它与下一个post等重叠。当你点击上面给出的链接上的图像时，你可以看到我的意思。
那么，我今天所追求的是关于如何解决这个问题的任何想法？ 砖石结构可以从幻灯片中最高的图像中获取高度吗？ 点击图像时它会动态变化吗？ 我可以确保绝对定位项目始终给出底部边距吗？
任何想法都会非常感激。
谢谢大家，理查德
你幻灯片插件似乎没有暴露任何事件钩子。 所以你必须以冗长的方式做到这一点..
更改初始化砌体插件的代码
$(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') 。