Question

案例： 我有一个带有图像和两个文本框的网格。我正在使用Isotope来布局网格并将其洗牌。

问题： 文本框应在网格中具有固定位置（无随机播放）。图像可以随机播放。

问题： 如何才能修复网格中的元素？我找到了一个已经完成的网站，我只是无法弄清楚如何... （http://www.facesofnyfw.com/）这里，第一个框（带有标题和过滤器，......）是固定的，不会移动。

提前致谢，

Ibe的

Answer 1

之前的答案是在正确的道路上，但Isotope发布了一个使用'stamps'而不是'corner-stamps'的新版本。查看文档here。它允许您指定页面上某些元素的位置，然后同位素将排列/（围绕？）它们之下的所有其他项目。我用它来修复容器div左上角的一个元素，它就像一个魅力。我想在其他地方放置东西可能会更困难，但我确信它有可能！

HTML：

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ....
</div>

JS：

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'

CSS：

/* position stamp elements with CSS */
.grid {
  position: relative;
}
.stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}

Answer 2

你想让图像像湖水中的石头流水一样洗牌吗？除非您自己定制插件，否则不要认为这是可以实现的。 Shuffle一次性随机化所有元素位置。 You can have a corner stamp though.如插图创作者所示。角落邮票 - 第一项，未过滤掉。

使用Isotope时固定网格中的项目

2 个答案: