我同时使用 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');}
任何帮助,将不胜感激。
谢谢