JQuery Masonry 不响应 CSS 高度变化

Question

我同时使用 JQuery Masonry 和 Twitter 引导程序，但遇到了一些问题。我不认为问题是由两者之间的任何冲突引起的。

我正在使用 Bootstrap Thumbnails 来提供图像/文本 div，然后使用 Masonry 将它们排列得更好。

我希望将来插入到每个缩略图 div 中的新内容不会受到太多限制，因为其中一些会动态加载，我希望 div 能够根据需要进行扩展。我希望能够灵活地切换内容可见性或在悬停时弹出内容等，这会触发 Masonry 重置其布局位置。

为了测试 Masonry 将如何响应这一点，我更改了 .thumbnail 类的 CSS，以便在悬停缩略图 div（每个都有类 '.thumbnail'）时，它会获得底部填充（这会迫使它的高度扩大） .

当 Masonry 加载时，它运行良好，并根据其初始大小定位所有内容。

当您悬停缩略图时，css hover 会启动并使容器在高度上扩展，但会强制它们与下面的缩略图重叠。

为了克服这个问题，我已经链接到一个外部 .js 文件并添加了一些自定义 jquery，它既好又简单，只需将鼠标悬停在每个缩略图上执行一个函数，告诉 Masonry 刷新/重新加载。这在将鼠标悬停在缩略图上时效果很好，css 悬停启动，div 展开，然后 Masonry 重新定位所有 div 以最适合新的 div 大小。

我的问题：当您将鼠标移出缩略图时，Masonry 无法识别“css 悬停”恢复到其原始状态的变化，因此缩略图的高度会降低，并在其自身和下方的缩略图之间留下间隙。就像当 Div 高度降低时 Masonry 无法识别新的高度值，但在 Div 高度扩展时却能识别？

我在我的自定义外部 .js 中针对 jQuery 悬停的两种状态运行相同的函数，并希望 Masonry 会响应正常，但没有。有任何想法吗？

我定义所有初始砌体：

<script type="text/javascript">
$(window).load(function(){
    $('.container-fluid').masonry({
    itemSelector: '.thumbnail',
    isAnimated: true,
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
        }   
    });    
})              
</script>  

我的自定义 .js 文件包含：

$(document).ready(function(){
$('.thumbnail').hover( 
    function(){run()},
    function(){run()}                     
);
});

function run() {$('.container-fluid').masonry('reload');}

任何帮助将不胜感激。

谢谢

Answer 1

正如我所怀疑的，这似乎是一个与时间相关的或事件排序问题。

这不能保证，但我认为handlerOut 触发器是在浏览器调整大小之前调用的不再悬停.thumbnail。但这只是胡乱猜测。

无论如何，这是你应该使用的：

$('.thumbnail').hover( 
    function(){run()},
    function(){setTimeout(function(){run()}, 200)}                     
);

超时允许事情在两者之间发生，值有点随机，只要不影响用户体验。

似乎在这个jsfiddle 中有效。