CSS Masonry Layout: проблема с динамической высотой плиток - PullRequest
Новая
       17

CSS Masonry Layout: проблема с динамической высотой плиток

0 голосов
/ 13 мая 2019

Сценарий :

Я пытаюсь реализовать макет кладки, используя свойство CSS column.(Ссылаясь на это ).

То, что я пробовал заранее

HTML: 

<div class="container">
  <div class="child item1">
    <div class="content">
      Some content 1
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item2">
    <div class="content">
      Some content 2
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item3">
    <div class="content">
      Some content 3
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item4">
    <div class="content">
      Some content 4
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item5">
    <div class="content">
      Some content 5
    </div>
    <div class="placeholder"></div>
  </div>
</div>

JS: 

var children = document.querySelectorAll(".child");

for (var i = 0; children.length; i++) {
  children[i].addEventListener("click", function() {
    var placeholder = this.querySelector(".placeholder");

    placeholder.innerHTML +=
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  });
}

CSS: 

.container {
  width: 100%;
  column-count: 2;
  column-gap: 16px;
}

.child {
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid red;
  break-inside: avoid;
  display: inline-block;
}

.content {
  width:100%;
  break-inside:avoid;
}

.placeholder {
  float: left;
}

.child:nth-child(odd) {
  min-height: 100px;
}

.child:nth-child(even) {
  min-height: 40px;
}

Пожалуйста, ознакомьтесь с этим Codepen для реализации того, чего я хочу достичь.

При щелчке по плитке в макете, например, 2-й плитке, к ней добавляется некоторый контент, и требуется увеличиваться по высоте и увеличиваться в той же позиции, в которой он отображается изначально.

enter image description here

Задача :

Когда высота увеличивается, последующая плитка переходит к следующему столбцу.См. Положение третьей плитки до и после добавления контента.

Ограничение :

  • Использование display: inline-block или float не имеет значения.
  • Невозможно использовать jQuery или любой другой плагин.

Вопрос :

Что можно сделать, чтобы избежать перемещения плитки вперед или назад при помощидинамически добавляемый контент?

...