jquery - 修复了使用同位素时网格中的项目

Question

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

问题： 文本框在网格中应该有一个固定的位置（没有随机播放）。图像可以随机播放。

问题： 如何让网格中的元素得到修复？我找到了一个已经完成的网站，我只是不知道如何......（http://www.facesofnyfw.com/）在这里，第一个框（带有标题和过滤器，......）是固定的并且不要移动。

提前致谢，

伊部

Answer 1

之前的答案是正确的，但是 Isotope 发布了一个新版本，它使用“stamps”而不是“corner-stamps”。在此处查看文档。它允许您指定页面上某些元素的位置，然后 isotope 将在下面/（周围？）它们排列所有其他项目。我用它来修复容器 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 一次随机化所有元素位置。你可以有一个角落印章。如插件创建者所示。角戳 - 第一项，未过滤掉。