Corrigido item na grade ao usar Isotope

Question

Caso:Peguei uma grade com imagens e duas caixas de texto.estou a usar Isótopo para organizar a grade e embaralhá-la.

Problema:As caixas de texto devem ter uma posição fixa na grade (sem embaralhamento).As imagens podem ser embaralhadas.

Pergunta:Como posso consertar os elementos da grade?Encontrei um site onde isso foi feito, só não consigo descobrir como ...(http://www.facesofnyfw.com/) Aqui, as primeiras caixas (com o título e o filtro, ...) são fixos e não se movem.

Desde já, obrigado,

Eu

Answer 1

A resposta anterior está no caminho certo, mas a Isotope lançou uma nova versão que usa 'selos' em vez de 'selos de canto'.Confira a documentação aqui.Ele permite que você especifique a posição de certos elementos na página e então o isótopo organizará todos os outros itens abaixo/(ao redor?) deles.Usei-o para corrigir um elemento no canto superior esquerdo da div do contêiner e funcionou perfeitamente.Imagino que seja mais difícil posicionar as coisas em outro lugar, mas tenho certeza que é possível!

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

Você quer que as imagens se movam como fluxos de água em torno de pedras em um lago?Não pense que isso é possível, a menos que você personalize o plugin você mesmo.Shuffle randomiza todas as posições de elemento de uma só vez. Você pode ter um carimbo de canto embora. Como mostrado pelo criador de pluging.Selo de canto - primeiro item, não filtrado.