删除同位素js中的空白

Question

There is space in-between each item in my grid. http://okbj.ca/ If you click on most recent or resize the window it will remove the space. When you refresh the space comes back. How can I remove this space for good?

I am using the latest versions of chrome, explorer, microsoft edge and firefox. It seems to not work on all of them.

Answer 1

This seems to be a browser-specific issue for you because it appears fine in the latest version of Chrome, Firefox and Safari on OSX.

It appears the issue occurs on Windows. There are two solutions.

Ugly Javascript Hack

Fire a resize event every second. This will force the plugin to recalculate the sizes.

// 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);

Use Media Queries Instead

This type of grid is easily achievable using pure CSS and some media queries. I inspected the elements and they're already using several media queries to adjust how things resize at different breakpoints.

/* 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

The collapse you want happens only on window resize event (in Chrome). You can dispatch the event once the grid is loaded:

(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);
  }
})();