Исправлен элемент в сетке при использовании изотопа

StackOverflow https://stackoverflow.com//questions/11652451

  •  11-12-2019
  •  | 
  •  

Вопрос

<Сильный> Кейс: Я получил сетку с изображениями и двумя текстовыми коробками.Я использую изотоп для макета сетки и перемешивает его.

<Сильная> проблема: Текстовые ящики должны иметь фиксированную позицию в сетке (без переменного). Изображения могут перемешать.

<Сильный> Вопрос: Как я могу получить элементы в сетке, чтобы быть исправлены? Я нашел сайт, где это было сделано, я просто не могу выяснить, как ... ( http://www.facesofnyfw.com/ ) Здесь первые коробки (с заголовком и фильтром, ...) фиксированы и не перемещаются.

Спасибо заранее,

Ibe

Это было полезно?

Решение

Предыдущий ответ на правильном пути, но изотоп выпустил новую версию, которая использует «штампы» вместо «угловых штампов».Проверьте документацию Здесь .Это позволяет вам указать положение определенных элементов на странице, а затем изотоп устроит все другие элементы ниже / (вокруг?).Я использовал его, чтобы исправить элемент в верхнем левом углу контейнера 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;
}
.

Другие советы

Вы хотите, чтобы изображения были перемешаны, как вода, потоки вокруг камней в озере?Не думайте, что это достижимо, если вы сами не настроили плагин.Shuffle Perrange представляет собой все позиции элементов одновременно. Вы можете иметь угловой штамп, хотя. Как показано замкнутым создателем.Угловой штамп - первый предмет, не отфильтрован.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top