javascript - 动态地重新排列 child 以使其适合有限的空间

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

我需要重新排列它们以使其最适合该正方形空间，而在列的底部不留较大的空白。我知道这样的任务可能是模棱两可的，我不需要找到最佳解决方案，也不需要找到所有可能性。只有某些东西会给出近似均匀的结果。

最佳答案

使用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;
}

这将立即对您的块进行排序，并在可能的情况下将其分解，以形成美观的均匀布局，如下所示：



这样做的问题是，有时您可能无法将内容分解成两个不同的列。

（在上面的示例图像中，请注意第一列中的最后一个块与第二列中的第一个块如何具有相同的颜色-这是因为该块已被拆分以完全适合）

在这种情况下，您将需要使用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;
    }
}

我做了一个小提琴，向您展示如何实现此目的。您可以忽略小提琴内部的javascript，而只是为了使每个块具有动态高度以及随机的背景颜色而编写。

You can see the working fiddle here

关于javascript - 动态地重新排列 child 以使其适合有限的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44284667/