javascript - 以不同方式设计垂直图像，使它们并排运行

Question

我正在构建一个图片库并有水平和垂直图像。此刻图像一个接一个加载，垂直堆叠。

它非常适合水平图像，但只要我在布局上有垂直图像，它就会拉伸(stretch)以匹配水平图像的宽度，并且变得太高而无法适应屏幕。

我正在尝试找到一种始终并排对齐 2 个垂直图像的解决方案。

这里有一些图形来说明我正在努力实现的目标:

Image <- 很抱歉我不能发布图片。

理想情况下会有一个仅使用 CSS 的解决方案，但我认为这不可能。因此，我尝试使用一些 jQuery。

$('.image-wrapper').prop('height', function(){
if($(this).height() > $(this).width()){
    //portrait, resize accordingly
    var width = $(this).width();
    var height = $(this).height();
    $(this).css({"width": "50%", "float": "left"});
});

此解决方案的唯一问题是它没有考虑 DIV 的边距。而且我找不到补偿它的方法。

这是指向 JSfiddle 的链接

更新:

我调整了 jQuery 以测试上一个图像是否垂直并在它们之间添加边距。我只是想知道这个解决方案有多可靠。

这是 [Fiddle][4] 的链接

作为奖励，如果能够检查我在一个序列中有多少垂直图像并将它们并排放置，那就太好了。 ;)

谢谢!

Answer 1

选项 1:

您提到您无权访问 html。为了访问第 n 个元素的 css，您可以使用 nth-of-type(x) 选择器。

这里是一些关于它的信息: http://www.w3schools.com/cssref/sel_nth-of-type.asp

仅使用 css，添加:

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

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

演示:http://jsfiddle.net/dsfa2bvu/39/

选项 2:

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

这是定位它的方法:

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

演示:http://jsfiddle.net/dsfa2bvu/40/