代码之家 › 专栏 › 技术社区 › Ilja

响应式砌体布局问题

jquery-masonry css html jquery javascript

Ilja · 技术社区 · 11 年前

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

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

我真的不知道是什么导致了这种奇怪的行为,所以我不知道该在这里发布哪一段代码,如果你知道是什么原因导致的,告诉我,我会在这里添加它。

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

我也在努力实现类似的目标 http://tympanus.net/codrops/collective/collective-57/

1 回复 | 直到 11 年前

elclanrs 11 年前

也可以尝试在Masonry中设置宽度:

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

推荐文章

Zinox · 当新数据加载砖石js时,不重新加载(砖石js和把手)

7 年前

user6124553 · 轨道上砌体效应的意外行为4

8 年前

Sebastian · 砌体未随窗口调整大小

10 年前

Mark1270287 · Masonry v3在添加元素时是否仍然支持飞入转换?

11 年前

Bojana Å ekeljiÄ · 每次刷新时,带有Wordpress画廊的砖石结构都会产生混乱的布局

11 年前

Ilja · 响应式砌体布局问题

11 年前

Dominic Bou-Samra · Jquery砌体附加项问题

12 年前

Matt · 是否可以只使用Bootstrap创建一个类似pinterest的布局?

12 年前

pepe · 无法在Sencha Touch 2应用程序中运行jQuery Masonry

12 年前

netwire · jQuery梅森角印章

12 年前