javascript - 删除同位素js中的空白

Question

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

我使用的是最新版本的 chrome、explorer、microsoft edge 和 firefox。它似乎对所有这些都不起作用。

Answer 1

这对您来说似乎是一个特定于浏览器的问题，因为它在 OSX 上的最新版本的 Chrome、Firefox 和 Safari 中看起来没问题。

问题似乎发生在 Windows 上。有两种解决方案。

丑陋的 Javascript 黑客攻击

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

// 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%;
  }
}