Javascript CSS列（照片网格）从左到右显示，而不是从上到下显示

我正在使用列来创建一个照片网格，它将所有提供的照片放在一起，中间没有任何空白

以下是我正在使用的CSS：

.autofit-photo-grid {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.autofit-photo-grid img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 1px solid #777;
  opacity: 0.85;
}

下面是一个显示问题的提琴示例：

如果你将鼠标悬停在每张图片上，你会看到他们说“照片1”，“照片2”，等等，但顺序是这样的

1    4    7
2    5    8
3    6    9

1    2    3
4    5    6
7    8    9

但我希望它像这样

1    4    7
2    5    8
3    6    9

1    2    3
4    5    6
7    8    9

这在纯CSS中是可能的吗？如果没有，是否有任何干净的jQuery解决方案可以提供帮助？我曾想过循环遍历每个图像元素，并尝试检查它所在的列，但这看起来很混乱（必须在调整大小时重复），而且我也不知道如何检查元素当前所在的列

---

如何实现相同的自动调整网格效果，但从左到右而不是从上到下列出连续的项目？

这将按照您想要的方式排列项目，并保持图像的纵横比。但是这些图像的高度是固定的，因此它的图像大小调整行为与您原来的略有不同

.autofit照片网格{
显示器：flex；
柔性包装：包装；
}
.自动安装照片栅格img{
高度：200px；
边框：1px实心#777；
不透明度：0.85；
}
.autofit照片栅格img：悬停{
盒影：0 12像素#333；
不透明度：1；
}

---

我通过为每个图像使用矩阵索引解决了这个问题。第一个完成的版本有点粗糙，当相邻图像的纵横比大不相同时，有时会稍微取消重新排序

我将在一个更新的版本，占图像尺寸，并将更新答案和小提琴时，它是完整的工作

我已将此JS/jQuery用于示例重排函数：

fidde样本：

---

不幸的是，在本例中，图像右侧有空白，类似于正常情况下在一行中显示图像时的空白：(