如何在JQuery中迭代实现为div中的列的图片？

我有一本画册

HTML:

图片的数量不是固定的，它们的高度可以不同

我试图以这种方式在JQuery中迭代图形：

var items = $('.gallery').children();

在这种情况下，迭代图片的顺序是垂直的。我的意思是，首先我从第一列从上到下得到图片，在第二列之后，等等。我理解这是因为我的HTML中的数字顺序应该是垂直的。但我需要一种方法来迭代这些数字：

var items = $('.gallery').children();

---

也许，有一种方法可以只使用JQuery来实现。或者我应该在我的HTML和CSS中做一些更改。解决此问题的最佳方法是什么？

您必须在迭代之前对项目进行排序（纯js解决方案）：

const items=[…document.querySelectorAll（'.gallery figure'）]
排序（（a，b）=>a.offsetTop/2-b.offsetTop）；
变量输出=“”
对于（{textContent:t}项）输出+=`${t}`
console.log（输出）

.gallery{
显示器：flex；
柔性流：柱包裹；
高度：400px；宽度：500px；
}
身材{
宽度：150px；
保证金：0 1rem 1rem 0；
背景：#aaa；
颜色：#fff；
文本对齐：居中；
字体大小：40px；
线高：2；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

列数是否固定？如果始终有3列，则可以使用类标记每列：

HTML:

...
...
...
...
...
...
...

Jquery：

var items = [];

for (var i = 1; i < 4; i++) {
    $(".col"+i).each(function () {
        items.push($(this));
    });
}

var项目=[]；
对于（变量i=1；i<4；i++）{
$（“.col”+i）.each（函数（）{
项目。推送（$（此））；
});
}

为什么需要按此特定顺序迭代它们？我希望保持弹出窗口中图片的直观顺序。检查引导程序，它将帮助您进行列布局

<div class="gallery">
<figure class="figure col1">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
<figure class="figure col2">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
<figure class="figure col3">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
<figure class="figure col1">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
<figure class="figure col2">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
<figure class="figure col3">
    <img src="..." class="figure-img img-fluid gallery-item">
    <figcaption class="figure-caption">...</figcaption>
</figure>
...

var items = [];

for (var i = 1; i < 4; i++) {
    $(".col"+i).each(function () {
        items.push($(this));
    });
}