去除同位素js中的空白区域

Question

我的网格中的每个项目之间都有空格。 http://okbj.ca/如果您点击最近或调整窗口大小，它将删除空格。当你刷新空间回来。我怎样才能永久删除这个空间？

我正在使用最新版本的chrome，explorer，microsoft edge和firefox。它似乎不适用于所有这些。

Answer 1

这似乎是针对您的特定浏览器问题，因为它在OSX上的最新版本的Chrome，Firefox和Safari中显示正常。

Windows上出现问题。有两种解决方案。

丑陋的Javascript Hack

每秒触发一次调整大小事件。这将强制插件重新计算大小。

// cross-browser resize event
var crossBrowserResize = function() {
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('resize', true, false);
    window.dispatchEvent(evt);
};

// fire the event every second
setInterval(function() {
    crossBrowserResize();
}, 1000);

使用媒体查询

使用纯CSS和一些媒体查询可以轻松实现这种类型的网格。我检查了这些元素，他们已经在使用多个媒体查询来调整事件在不同断点处的调整大小。

/* 4 columns on tablet landscape and up */
@media screen and (max-width: 1024px) {
  .block {
    width: 25%;
  }
}

/* 2 columns on tablet profile */
@media screen and (max-width: 720px) {
  .block {
    width: 50%;
  }
}

/* 1 column on phone landscape or profile */
@media screen and (max-width: 480px) {
  .block {
    width: 100%;
  }
}

Answer 2

您想要的崩溃仅发生在窗口调整大小事件（在Chrome中）。您可以在加载网格后调度事件：

(function fixGrid() {
  var img, grid = document.querySelector('.grid');
  if (grid) {img = grid.querySelector('img');}
  if (img && img.height) {
    window.dispatchEvent(new Event('resize'));
    grid.style.opacity = 1;
  } else {
    if (grid) {grid.style.opacity = 0;}
    setTimeout(fixGrid, 10);
  }
})();