Галерея высоких неровных элементов с равномерным распределением

Я использую API Twitter для получения последних 6 твитов, но все они имеют разную высоту.

Я хочу создать сетку, в которую я помещаю 6 твитов и распределяю их равномерно, не оставляя пробелов.

Я пытался использовать этот код в контейнере твитов:

column-count: 5;
column-gap: 15px;
column-fill: auto;

, но я думаю, что есть лучший способ сделать это.

Это распределение, которое я хочу достичь:

La distribución a la que quiero llegar

1
задан 22.09.2019, 20:11
1 ответ

Давно с тех пор, как formulГі этот вопрос. Это mГЎs страховка состоит в том, чтобы уже ты нашел одну soluciГіn, но в любом случае не estГЎ mГЎs помещать ответ, если он может быть Гєtil для кого-то mГЎs.

, Если ты знаешь nГєmero статей и колонн, - относительно простой создавать эффект Masonry используя flexbox и немного JavaScript. Прием состоит в распространении элементов из-за колонн, но меняя Вашу команду, чтобы давать ее impresiГіn линий, и despuГ©s налаживать высоту контейнера dГЎndole стоимость mГЎs большой, что alcanzarГ-an колонны, сформированные из-за nГєmero желанных элементов. Наладив высоту контейнера, свойство flex-wrap распространяет элементы в различных колоннах вместо в одной (в твоем случае как это шесть элементов в общем количестве и ты хочешь распространить их в трех колоннах, так как каждая колонна contarГ - в с двумя элементами).

AquГ - у тебя есть snippet, который показывает эту концепцию в функционировании:

ты Должен иметь в виду, что, если ты layout - responsivo, ты должен обновлять высоту контейнера в каждый redimensiГіn, принимая во внимание новых tamaГ±os элементов.

const container = document.querySelector('.container');
const boxes = container.querySelectorAll('.box');

// Actualizar el orden para hacerlo más similar a filas en vez de a columnas
boxes.forEach((b, i) => {
  b.style.order = i % 3;
});

// Actualizar el alto del contenedor
// Teniendo en cuenta la mayor suma de cada columna
// Como son seis elementos y tres columnas, pues el máximo de elementos por columna es dos
const heights = Array.prototype.reduce.call(boxes, (h, b, i) => {
  const o = i % 3;
  h[o] = h[o] || 0;
  h[o] += b.offsetHeight;
  return h;
}, []);
container.style.height = `${Math.max(...heights)}px`;
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 10px 0 0 10px;
}

.box {
  box-sizing: border-box;
  display: flex;
  padding: 0 10px 10px 0;
  width: 33.3333%; /* 33.3333% es para tres columnas */
}

.inner {
  align-items: center;
  background-color: lightgray;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  flex: 1 0;
  justify-content: center;
}

/* Dar altos diferentes a los elementos */
.box:nth-child(1),
.box:nth-child(3),
.box:nth-child(5) {
  height: 100px;
}

.box:nth-child(2) {
  height: 200px;
}
.box:nth-child(4) {
  height: 150px;
}
.box:nth-child(6) {
  height: 180px;
}
<div class="container">
  <div class="box">
    <div class="inner">1</div>
  </div>
  <div class="box">
    <div class="inner">2</div>
  </div>
  <div class="box">
    <div class="inner">3</div>
  </div>
  <div class="box">
    <div class="inner">4</div>
  </div>
  <div class="box">
    <div class="inner">5</div>
  </div>
  <div class="box">
    <div class="inner">6</div>
  </div>
</div>
0
ответ дан 24.11.2019, 07:27

Теги

Похожие вопросы