горизонтальная Масонри разметка

Question

Нужно реализовать Масонри разметку в горизонтальном виде, в две строки. Те, если в стандартной Масонри задается ширина колонок и элементы выстраиваются по высоте, а как можно тем же Масонри, или другими инструментами, сделать, так чтобы задавалась высота строк и элементы выстраивались по ширине. Желаемый результат представлен на картинке

Код разметки ниже. Для наглядности родительский блок имеет красный фон, и вот нужно чтобы элементы занимали 2 строки (те всю красную область по высоте), а по ширине ограничений нет, могут выходить за размеры родительского блока (с красным фоном).

.parent {
  width: 500px;
  height: 200px;
  background-color: red;
}

.div {
  width: max-content;
  display: flex;
  align-items: center;
}

.child {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
}

.child:nth-of-type(1) {
  width: 120px;
  height: 80px;
}

.child:nth-of-type(2) {
  width: 250px;
  height: 100px;
}

.child:nth-of-type(3) {
  width: 90px;
  height: 30px;
}

.child:nth-of-type(4) {
  width: 170px;
  height: 80px;
}

.child:nth-of-type(5) {
  width: 70px;
  height: 40px;
}

.child:nth-of-type(6) {
  width: 230px;
  height: 180px;
}

.child:nth-of-type(7) {
  width: 120px;
  height: 80px;
}

.child:nth-of-type(8) {
  width: 250px;
  height: 90px;
}

.child:nth-of-type(9) {
  width: 90px;
  height: 30px;
}

.child:nth-of-type(10) {
  width: 170px;
  height: 80px;
}

.child:nth-of-type(11) {
  width: 70px;
  height: 40px;
}

.child:nth-of-type(12) {
  width: 230px;
  height: 100px;
}

<div class="parent">
  <div class="div">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 1

Вы такое имеете в виду?

div {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 5px;
  height: 80px;
}
div:nth-of-type(1) {
  width: 120px;
}
div:nth-of-type(2) {
  width: 250px;
}
div:nth-of-type(3) {
  width: 90px;
}
div:nth-of-type(4) {
  width: 170px;
}
div:nth-of-type(5) {
  width: 70px;
}
div:nth-of-type(6) {
  width: 230px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

Решение не идеальное, но приближенное к нему

    let funiro = document.querySelector('.funiro'),
        funiros = funiro.querySelectorAll('.funiro__item'),
        fMargin = 2 * parseInt(window.getComputedStyle(funiros[0], null).margin);

    let fWidth = funiro.clientWidth / 2 + fMargin * funiros.length;

    funiro.style.width = fWidth + 'px';

    new Masonry( '.funiro', {
        itemSelector: '.funiro__item',
        columnWidth: 2,
        horizontalOrder: true
    });

.funiro {
   background: #EEE;
    width: max-content;
    display: inline-flex;
    align-items: center;
}

.funiro__item {
    margin: 0.5rem;
  background-color: red;
}

.funiro__item:nth-child(1n) {
width: 274px;
height: 382px;
 }

.funiro__item:nth-child(2n) {
width: 451px;
height: 312px;
 }

.funiro__item:nth-child(3n) {
width: 295px;
height: 392px;
 }

.funiro__item:nth-child(4n) {
width: 344px;
height: 242px;
 }

.funiro__item:nth-child(5n) {
width: 178px;
height: 242px;
 }

.funiro__item:nth-child(6n) {
width: 248px;
height: 196px;
 }

.funiro__item:nth-child(7n) {
width: 290px;
height: 348px;
 }

.funiro__item:nth-child(8n) {
width: 425px;
height: 433px;
 }

.funiro__item:nth-child(9n) {
width: 381px;
height: 323px;
 }

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<div class="funiro">
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
  <div class="funiro__item"></div>
</div>

БЛОГ НА HUSL

горизонтальная Масонри разметка

Ответы (2 шт):