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

Question

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

问题: 文本框在网格中应该有一个固定的位置(没有随机播放).图像可以随机播放.

问题: 如何修复网格中的元素？我发现了一个已经完成的网站,我只是想不出来......(http://www.facesofnyfw.com/)这里,第一个框(标题和过滤器,......)是固定的而且不要动.

提前致谢,

IBE

Answer 1

之前的答案是在正确的道路上,但Isotope已经发布了一个使用'stamps'而不是'corner-stamps'的新版本.在这里查看文档.它允许您指定页面上某些元素的位置,然后同位素将排列/(围绕？)它们之下的所有其他项目.我用它来修复容器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;
}