Javascript 以不同的方式设置垂直图像的样式，以便它们并排运行

我正在建立一个图像库，有水平和垂直图像。此时，图像一个接一个地加载，垂直堆叠

它对水平图像非常有效，但一旦我在布局上有了垂直图像，它就会拉伸以匹配水平图像的宽度，并且变得太高而无法适应屏幕

我正试图找到一种解决方案，使两个垂直图像始终并排对齐

以下是一些图表来说明我试图实现的目标：

---

选项1:

您提到您没有访问html的权限。为了访问第n个元素的css，您可以使用类型（x）选择器的第n个

以下是一些关于它的信息：

仅使用css，添加以下内容：

.image-wrapper:nth-of-type(2),.image-wrapper:nth-of-type(3){
    float:left;
    width:50%;
    padding:0;
    margin:0;
}

并删除你的js。这应该可以做到

演示：

选项2:

使用Jquery，在每个图像中找到单词“vertical”。找到后，向其添加样式

以下是如何找到它：

var x = $("img[src$='vertical-img']");
x.css("float","left");

演示：

这里有一个解决方案：

$('.thumb-image').each(function (i, obj) {
        if ($(this).width() > $(this).eq(i + 1).width()) {
            $('.thumb-image').slice(i + 1).each(function () {

                $(this).css({
                    float: "left",
                    width: "50%",
                    padding: "0",
                    margin: "0"


                });
            });
        }

    });

---

fiddle编辑：

垂直图像应该放在哪里？为什么不在每个垂直图像上都放上float:left？不需要jquery。垂直{float:left；width:50%}@eugensunic他们应该走在水平的后面。我链接的图像应该能让你更好地理解我的意思。@BragDeal我没有访问HTML的权限，水平图像和垂直图像都有相同的CSS类。我正在调整其中一个Squarespace主题。图像重定向到某个URL？谢谢夸克。这是一项伟大的技术，但我并不总是知道垂直图像的第n个。有时是第二场和第三场，有时是第十场和第十一场等等。布拉德p当具有相同的类名时，不访问html可以做很多事情。我唯一的另一个想法是，在每张图片中找到“垂直”一词，并使用js将所需的样式添加到itSorry，Brag；）我想我已经为此挣扎太久了。该休息了。你是说在文件名中找到“垂直”这个词？这可能是一个有趣的方法。更新了我的答案。您可以找到所需的图像（假设图像中有垂直img这个词，那么你可以用非常优雅的解决方案Eugen来设计它。有没有办法在垂直图像之间添加20px的边距？我试过这样的方法：我发现你已经用你的示例实现了它。是的，你可以，但是你必须使用if stat。用一个右边留空白，右边留空白，但我相信你也得换一下包装。如果我明天有时间，如果你还想的话，我会这样做。如果你明天有空的话，我会非常感激。如果我在这期间发现任何东西，我会及时通知你的。谢谢

$('.thumb-image').each(function (i, obj) {
        if ($(this).width() > $(this).eq(i + 1).width()) {
            $('.thumb-image').slice(i + 1).each(function () {

                $(this).css({
                    float: "left",
                    width: "50%",
                    padding: "0",
                    margin: "0"


                });
            });
        }

    });