Javascript 同位素重叠图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8622906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Isotope Overlapping Images?
提问by Joe Bobby
It seems like it only happens in Chrome and Safari.. not Firefox. I'm using it with the foundation responsive framework so I'm not sure what to do about setting the height. It also seems there isnt enough spacing between the images in Chrome/Safari..
似乎它只发生在 Chrome 和 Safari 中……而不是 Firefox。我将它与基础响应框架一起使用，所以我不确定如何设置高度。Chrome/Safari 中的图像之间似乎也没有足够的间距..
How do I fix this?
我该如何解决？
Edit: Here is a fiddle http://jsfiddle.net/TLjay/
编辑：这是一个小提琴http://jsfiddle.net/TLjay/
The problem with it is that it doesn't seem to be displaying the problem I'm having.. so I'm not sure what to do about that.. I've tried disabling everything but isotope.. all jquery/css and It still shrinks the images in Chrome/Safari but its fine in firefox.
它的问题在于它似乎没有显示我遇到的问题..所以我不知道该怎么做..我试过禁用除同位素之外的所有内容..所有 jquery/css 和它仍然缩小了 Chrome/Safari 中的图像，但它在 Firefox 中很好。
Also, If I hit the "All" under filter it stretches the page to how its suppose to look so that could be helpful in figuring this out
此外，如果我点击过滤器下的“全部”，它会将页面拉伸到它的外观，这样可能有助于解决这个问题
I got it to work with imagesLoaded, so its giving enough space but the space on the left and right of the images is still not where its suppose to be.. my script is below
我让它与imagesLoaded一起工作，所以它提供了足够的空间，但图像左侧和右侧的空间仍然不是它假设的位置..我的脚本在下面
<script type="text/javascript">
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;
});
</script>
回答by Gabriele Petrioli
Update(original answer was wrong because the browser used cached images..)
更新（原始答案是错误的，因为浏览器使用了缓存图像..）
The issue seems to be that the images are not loaded and the calculations fail.
问题似乎是图像未加载且计算失败。
If you wrap the isotop code in $(window).load(function(){ ..... });it seems to work as expected..
如果您将 isotop 代码包装在其中，$(window).load(function(){ ..... });它似乎可以按预期工作..
See http://jsfiddle.net/TLjay/2/
Not sure why it happens, but a simple workaround is (since it gets fixed once you resize the window) to manually call a resize.
不知道为什么会发生这种情况，但一个简单的解决方法是（因为它在调整窗口大小后得到修复）手动调用resize.
so just adding $(window).resize();at the end of your code fixes it..
所以只需$(window).resize();在代码末尾添加即可修复它..
Demo at http://jsfiddle.net/TLjay/1/
回答by Ankit Agrawal
imagesLoaded works by checking the images currently in the containing element. So in your case, it's not actually do anything in $(window).load() since there are no items in that element. Instead, I would recommend triggering imagesLoaded again, after items have been inserted with the $.ajax.success
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');
});
}
});
回答by Florian
In case you have the dimensions of the images available you could do a workaround with SVG placeholders.
如果您有可用的图像尺寸，您可以使用 SVG 占位符进行解决。
For example: Use a figure element and position the img with "position: absolute" on top of the svg.
例如：使用一个图形元素并将带有“位置：绝对”的 img 定位在 svg 的顶部。
This way isotope renders the gridelement with the SVG that occupies the space and puts the img on top it.
通过这种方式，isotope 使用占据空间的 SVG 渲染 gridelement 并将 img 放在它上面。
<figure>
<svg xmlns="http://www.w3.org/2000/svg"
width="[inputKnownImageWidth]"
height="[inputKnownImageHeight]"
></svg>
<img src="" alt="">
</figure>
回答by terry
You should make sure you preload all imagess before you call isotope method, here is real world demo for this: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, you preload images with jquery.imagesloaded.min.js plugin, then call isotope , content won't get overlapped.
您应该确保在调用同位素方法之前预加载所有图像，这是真实世界的演示：http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html 。 htm，您使用 jquery.imagesloaded.min.js 插件预加载图像，然后调用 isotope ，内容不会重叠。
