javascript - Rails中的砌体-刷新时框有时不对齐

我遇到问题的页面位于：http://forkfox.com/tours

如果您刷新页面足够的次数（通常是在第二次甚至在第一次加载页面时），您会看到某些方框相互重叠。

JS

var container = document.querySelector('#alltours');
var msnry = new Masonry( alltours, {
  // options
  itemSelector: '.box',
});

让我知道您是否需要其他信息来帮助解决此问题。

谢谢！

编辑1：我已经添加了imagesLoaded，如下所示，但我似乎仍然有同样的问题。

// or with jQuery
// initialize Masonry
var $container = $('#alltours').masonry();
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
  $container.masonry();
});

最佳答案

这可能与Chrome的主动缓存有关。您可能要看一下https://github.com/desandro/imagesloaded。

imagesLoaded( document.querySelector('#alltours'), function( instance ) {
  // Call Masonry here...
});

但是由于您已经在使用jQuery：

$('#alltours').imagesLoaded( function() {
  // Call Masonry here...
});

让我知道有帮助。