javascript - 动态重新排列 child 以适应有限空间中的大多数

Question

我有一个 100vw x 100vh 的大 div，在许多子 div 中，每个子 div 的宽度相等，但高度不同，使用 flexbox wrap 排列成列。

我需要重新排列它们以最好地适应那个方形空间，而不是在列的底部留下大的空白空间。我知道这样的任务可能是模棱两可的，我不需要找到最好的解决方案，也不需要找到所有的可能性。只有能给出大致均匀的结果的东西。

Answer 1

使用 CSS 实现此目的的一种简单方法是使用 column-count。

语法如下:

.parent-container {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

这将立即对您的 block 进行排序，并在可能的情况下将它们打散，以形成一个漂亮的均匀布局，如下所示:

这样做的问题是，有时您的内容可能不能被拆分以放入两个不同的栏中。

(在上面的示例图像中，请注意第一列中的最后一个 block 与第二列中的第一个 block 的颜色相同 - 这是因为它是同一个 block ，已被拆分为完美契合)

在这种情况下，您将需要使用 break-inside: avoid-column，同时通过在子项上使用以下 CSS 牺牲一些更清晰的布局选项。

.parent-container > * {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

这将为您提供如下所示的布局:

正如你所看到的，它在最后并不完全平滑，但它优化了排列以很好地适应。

您很可能还必须使用媒体查询来根据屏幕宽度调整列数，以确保良好流畅的响应式布局。

像这样:

@media (max-width: 760px) {
    #parent-container {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

我制作了一个 fiddle 来向您展示如何实现它。您可以忽略 fiddle 中的 javascript，它只是为了给每个 block 一个动态高度和一个随机背景颜色而编写的。

You can see the working fiddle here