Question

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

我正在使用Bootstrap缩略图，提供图像/文本div，然后使用Masonry更好地安排它们。

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

为了测试Masonry如何响应这一点，我改变了.thumbnail类的CSS，这样当悬停缩略图div（每个都有类'.thumbnail'）时，它会获得底部填充（这会强制它的高度扩展）

当砌体加载时，它可以很好地工作，并根据它的初始尺寸定位所有东西。

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

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

我的问题：当你将鼠标移出缩略图时，Masonry无法识别'css hover'中的变化回到其原始状态，因此缩略图的高度会降低，并在其自身与下方的缩略图之间留下间隙。这就像当Div降低高度时，砌体没有识别出新的高度值，但是当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。

JQuery Masonry没有响应CSS高度变化

1 个答案: