问题与响应砖石布局 [英] Issue With Responsive Masonry Layout

问题描述

我使用 Masonry 浏览我的网站布局，一切正常，但有响应性的问题。
现在所有元素都设置为31.8％的宽度（也有一些边距等..）我假设通过调整浏览器窗口大小我仍然会保留3列，但所有元素的宽度只会减小，但是不是这样，通过调整窗口大小，一切都开始分裂，我不能知道这个奇怪的行为是从哪里来的。

你可以看到我的生活演示网站： http://freshbeer.lv/test/index.html

我真的不知道是什么原因造成这种奇怪的行为，所以我不知道哪些位的代码在这里，如果你知道什么位可能会导致它，告诉我，

有意思的是，在调整大小和刷新窗口后，它看起来更好，但不完全正确。

此外，我想尝试实现类似 http://tympanus.net/codrops/collective/collective-57/

解决方案

尝试设置Masonry中的宽度：

  $（'grid'）。masonry（{
 itemSelector：'.content -box'，
 columnWidth：function（width）{
 return width *（31.8 / 100）; 
} 
}）; 
  

I am using Masonry for the layout of my website, everything works fine, but there is an issue with a responsiveness. At the moment all elements are set to a width of 31.8% (also have some margins etc..) I was assuming that by resizing a browser window I will still keep 3 columns, but all element's would just decrease in width, however that was not the case, by resizing a window everything starts falling apart, I can't tell where this strange behaviour is coming from.

You can see my live demo site here: http://freshbeer.lv/test/index.html

I really don't know what is causing that strange behaviour, so I don't know which bit's of code to post here, if you know what bits could cause it, tell me and I'll add it here.

Edit: Interestingly, after resizing it and refreshing the window, it looks better, but not exactly correct.

Also I am trying to achieve something similar to this http://tympanus.net/codrops/collective/collective-57/

解决方案

Try setting the width in Masonry too:

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

这篇关于问题与响应砖石布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！