javascript - 响应式砌体布局问题

Question

我正在使用 Masonry对于我网站的布局，一切正常，但响应能力存在问题。目前所有元素的宽度都设置为 31.8%(也有一些边距等。)我假设通过调整浏览器窗口的大小我仍然会保留 3 列，但所有元素的宽度只会减小，但那是事实并非如此，通过调整窗口大小一切都开始分崩离析，我不知道这种奇怪的行为是从哪里来的。

你可以在这里看到我的现场演示网站:http://freshbeer.lv/test/index.html

我真的不知道是什么导致了这种奇怪的行为，所以我不知道应该在此处发布哪些代码，如果您知道哪些代码可能导致它，请告诉我，我会在此处添加它。

编辑:有趣的是，在调整大小并刷新窗口后，它看起来好多了，但并不完全正确。

此外，我正在尝试实现与此类似的东西 http://tympanus.net/codrops/collective/collective-57/

Answer 1

也尝试在 Masonry 中设置宽度:

$('.grid').masonry({
  itemSelector: '.content-box',
  columnWidth: function(width) {
    return width * (31.8 / 100);
  }
});