同位素重叠图像？

它似乎只发生在Chrome和Safari ..而不是Firefox。 我正在使用它与基础响应框架，所以我不知道如何设置高度。 Chrome / Safari中的图像似乎也没有足够的间距。

我该如何解决？

编辑：这是一个小提琴http://jsfiddle.net/TLjay/

它的问题是它似乎没有显示我遇到的问题..所以我不知道该怎么做…我已经尝试禁用除了同位素以外的所有东西..所有jquery / css和它仍然缩小了Chrome / Safari中的图像，但它在Firefox中很好用。

此外，如果我在filter下点击“全部”，它会将页面拉伸到它看起来的样子，这样可能有助于解决这个问题。

我得到它与imagesLoaded一起工作，所以它提供了足够的空间，但图像左侧和右侧的空间仍然不是它想象的地方..我的脚本在下面

 var $container = $('.isosort') // initialize Isotope $container.isotope({ // options... resizable: false, // disable normal resizing layoutMode : 'fitRows', animationEngine : 'best-available', // set columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 5 } }); // update columnWidth on window resize $(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 5 } }); }); $container.imagesLoaded( function(){ $container.isotope({ // options... }); }); $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; });  

Answer 1

更新 （ 原始答案错误，因为浏览器使用缓存的图像.. ）

问题似乎是图像未加载且计算失败。

如果将isotop代码包装在$(window).load(function(){ ..... }); 它似乎按预期工作..

见http://jsfiddle.net/TLjay/2/

---

不知道为什么会发生这种情况，但是一个简单的解决方法是（ 因为一旦你调整窗口大小就会得到修复 ）来手动调用resize 。

所以只需添加$(window).resize(); 在你的代码的最后修复它..

演示http://jsfiddle.net/TLjay/1/

Answer 2

imagesLoaded通过检查当前包含元素中的图像来工作。 所以在你的情况下，它实际上并没有在$（window）.load（）中做任何事情，因为该元素中没有项目。 相反，我建议在使用$ .ajax.success插入项目后再次触发imagesLoaded

 success: function(data){ // Update isotope container with new data. $container.isotope('remove', $container.data('isotope').$allAtoms ) $container.isotope('insert', $(data) ) // trigger isotope again after images have been loaded .imagesLoaded( function() { $container.isotope('reLayout'); }); } }); 

Answer 3

如果您有可用图像的尺寸，您可以使用SVG占位符进行解决方法。

例如：使用一个figure元素并将img与“position：absolute”放在svg的顶部。

这种方式同位素使用占据空间的SVG渲染gridelement并将img放在顶部。

Answer 4

你应该确保在调用同位素方法之前预先加载所有图像，这是真实世界的演示： http ：//gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html 。 htm ，你用jquery.imagesloaded.min.js插件预加载图像，然后调用同位素，内容不会重叠。