同位素元素仅在页面刷新时刷新答案

【问题标题】：Isotope elements only refresh on page refresh同位素元素仅在页面刷新时刷新
【发布时间】：2012-10-17 02:42:22
【问题描述】：

我正在尝试使用同位素 jquery 重新排列投资组合。

我希望网站具有响应性，因此我将容器中的元素设置为 22% 宽。

但是，当我第一次加载页面时，一切看起来都很好。或者刷新一下。但是，如果我调整页面大小，元素宽度变化很好，但它们之间有很大的差距。

在 ipad 上进行纵向和横向之间的烘焙测试时也会发生同样的情况。

为什么他们不自动移动到他们的新位置，直到页面被刷新？这是一个例子。我所说的部分是“特色”框。

Http://www.comeinside.co.uk

【问题讨论】：

你用什么代码/标记来声明这个 22% 宽的规则？
只是每个元素的 CSS 规则。每个元素都有附加的“grid_3”样式表，宽度=22%，边距左/右=1%
既然你在这里询问了一个jQuery插件，你应该包括你写的调用这个插件的相关JS。

标签： jquery responsive-design jquery-isotope

【解决方案1】：

从来没有用过这个插件，但是在谷歌上搜索了一下，他的演示看起来就像你想要的那样： http://isotope.metafizzy.co/demos/fluid-responsive.html

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 5 }
  });
});

【讨论】：