0

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

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

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

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

当 Masonry 加载时,它工作得很好,并根据它的初始大小定位所有内容。

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

为了克服这个问题,我已经链接到一个外部 .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');}

任何帮助,将不胜感激。

谢谢

4

1 回答 1

1

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

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

无论如何,这是你应该使用的:

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

超时允许事情在两者之间发生,该值有点随机,只要它不干扰用户体验。

似乎在这个jsfiddle中工作。

于 2012-06-26T23:39:31.507 回答