使用严格排序的 grid/flex 填充垂直空白

Question

我有一个图片库，图片大小不一（不断变化）。我希望能够将图像卡向上移动到上面图像卡的正下方。

Ideal layout

但是，图像保持日期顺序非常重要。我尝试过的解决方案都改变了顺序。它们主要涉及使用 flex 按列排序，这会产生以下结果：

1 4 7
2 5
3 6

我还想要：

1 2 3 4
5 6 7

有没有办法做到这一点，最好是在 CSS Grid 中，但我可以在必要时使用 flexbox，而且它不会影响排序。

我现在的造型很简单：

.cards-container-not-home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

顺序由日期描述决定。图像在上传时与时间戳一起存储。然后我调用 firebase 并按日期顺序将它们取回并将它们推送到一个数组中：

  let picturesData = [];
  let snapshot = await db
    .collection(collection)
    .orderBy("timestamp", "desc")
    .get();
  snapshot.forEach((doc) => {
    let appData = doc.data();
    appData.id = doc.id;
    picturesData.push(appData);
  });
  return picturesData;

我遍历数组，然后执行 v-for 循环以按 desc 日期顺序将图像卡打印到页面。

这是模板：

<template>
  <div v-bind:class="{ 'cards-container-not-home': notHome }">
    <div v-for="data in imageData" :key="data.id">
      <div class="card">
        <img :src="data.source" :alt="data.caption" class="card-img" />
        <div class="text-box">
          <p>{{ moment(data.timestamp.toDate()).format("MMM Do YYYY") }}</p>
          <p>{{ data.caption }}</p>
          <Geolocation v-bind:address="data.location" />
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

您可以使用 flex 网格和 js 混合来制作 Masonry 布局，因为它是基于列的网格布局。与其他网格布局不同，它没有固定高度的行

https://codepen.io/inorganik/pen/pREYPJ

Vue

<template>
  <div id="block-contain" v-bind:class="{ 'cards-container-not-home': notHome }">
    <div v-for="data in imageData" :key="data.id" class="block">
      <div class="card">
        <img :src="data.source" :alt="data.caption" class="card-img" />
        <div class="text-box">
          <p>{{ moment(data.timestamp.toDate()).format("MMM Do YYYY") }}</p>
          <p>{{ data.caption }}</p>
          <Geolocation v-bind:address="data.location" />
        </div>
      </div>
    </div>
  </div>
</template>

CSS

#block-contain { 
  display: flex;
  flex-flow: column wrap;
  max-width:100%;
}
.block {
  padding:20px;
  flex: 1 0 auto;
  overflow:hidden;
}
.card{
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 0 auto;
  justify-content:center;
  align-items:center;
  min-height:100px;
}

脚本适应

var COL_COUNT = 3; // set this to however many columns you want
var col_heights = [], 
    container = document.getElementById('block-contain');
for (var i = 0; i <= COL_COUNT; i++) {
  col_heights.push(0);
}
for (var i = 0; i < container.children.length; i++) {
  var order = (i + 1) % COL_COUNT || COL_COUNT;
  container.children[i].style.order = order;
  col_heights[order] += parseFloat(container.children[i].style.height);
}
var highest = Math.max.apply(Math, col_heights);
container.style.height = highest+'px';