我在http://voicent.com/case-studies/中实现了jQuery Isotope
如果您正常访问该URL，则大多数时候都可以使用。但是，如果您按F5，则每次都会中断。我不知道为什么它通过工作有时甚至不起作用是奇怪的。
这是同位素的错误，还是我的实现有问题？
当我按F5时，我的本地主机副本可以正常运行99％的时间。
<script>
$(document).ready(
function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
isResizeBound: true
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter button click
$('.filters-button-group').on('click', 'li', function() {
var filterValue = $(this).attr('data-filter');
$('.tags__link--active').removeClass('tags__link--active');
$(this).addClass('tags__link--active');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({filter: filterValue});
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
});
</script>
最佳答案
问题
这些图像可能会导致您的问题。由于您的同位素是在DOM上准备就绪的，因此图像尚未完全加载，从而使同位素计算变得混乱。
为什么在本地计算机上或直接访问URL时可以使用？这是因为在本地计算机上，加载时间非常快（几乎是即时的），因此计算结果很好。在远程服务器上，图像被缓存在您的计算机上，因此请求的速度也非常快。按F5键时，浏览器不会在高速缓存中获取图像，而是发出新请求。
解决方案
如果您查看isotope的常见问题，您将看到第一个问题正是您的问题：
如何修复重叠的项目元素？
如果布局中包含图像，则可能需要使用imagesLoaded。
重叠的项目是由布局后更改大小的项目引起的。这是由卸载的媒体引起的：图像，web fonts，嵌入式按钮。要解决此问题，您需要在所有项目都具有适当的大小后进行初始化或layout。
因此，阅读之后，解决方案是将这些行添加到您的代码中（在同位素初始化之后）：
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});