基于每 2 个图像行的容器高度

Question

我正在处理这个website

我正在使用此脚本调整垂直图像的大小：

function Gallery(selector) {
  this.add_module = function (type, image) {

    var portrait_text = image.next('.portrait_text');

    var container = $('<div />', {
      'class': 'gallery_container'
    }).append(image).append(portrait_text);

    if (type == 'horizontal') {
      var h_ar = image.attr('height') / image.attr('width');
      var c_width = selector.width();
      var c_height = selector.width() * h_ar
      container.css({
        'width': c_width,
        'height': c_height
      })
    }
    if (type == 'vertical') {
      var c_width = v_width;
      var c_height = v_height
      container.css({
        'width': Math.floor(v_width),
        'height': v_height
      })
    }
    container.css({
      'float': 'left',
    })
    container.find('img').attr({
      'width': '100%',
      'height': '100%'
    })
    container.attr('ar', c_height / c_width)
    container.appendTo(selector);

    //container.children('img').fitToBox();
  }

  this.resized = function () {
    //console.log(sel)
    $('.gallery_container').each(function () {
      if ($(this).attr('ar') >= 1) { // vertical
        $(this).css({
          'width': sel.width() / 2,
          'height': sel.width() / 2 * $(this).attr('ar')
        })
      } else { // horizontal
        $(this).css({
          'width': sel.width(),
          'height': sel.width() * $(this).attr('ar')
        })
      }
    })
  }
  var _this = this;
  var gutter = 0;
  // start vars for counting on vertical images
  var v_counter = 0;
  var w_pxls = 0;
  var h_pxls = 0;
  var v_ar;
  // iterates through images looking for verticals
  selector.children('img').each(function () {
    if (parseInt($(this).attr('width')) < parseInt($(this).attr('height'))) {
      v_counter++;
      h_pxls += $(this).attr('height');
      w_pxls += $(this).attr('width');
      v_ar = $(this).attr('height') / $(this).attr('width')
    }
  })
  // calculates average ar for vertical images (anything outside from aspect ratio will be croped)
  var h_avrg = Math.floor(h_pxls / v_counter);
  var w_avrg = Math.floor(w_pxls / v_counter);
  var v_width = Math.floor((selector.width()) / 2);
  var v_height = v_width * v_ar;
  var sel = selector;
  selector.children('img').each(function () {
    if (parseInt($(this).attr('width')) > parseInt($(this).attr('height'))) {
      _this.add_module('horizontal', $(this));
    } else {
      _this.add_module('vertical', $(this));
    }
  })
  $(window).bind('resize', _this.resized);
}

var gallery = new Gallery($('#gallery_images_inner'));

http://jsfiddle.net/mZ2Ks/

我遇到的问题是脚本使所有容器的高度相同（取决于我认为页面上的最后一个图像），因此例如第一个图像以不好的方式调整大小。如果您查看示例，所有 2 个图像行的高度均为 613 像素。

有什么办法可以控制每两个图像容器根据其图像计算它自己的高度，现在它看起来计算最后一个图像调整高度和将其应用于所有其他容器

应用 height: auto 而不是 100% 将不起作用，因为它不会使图像适合垂直容器的高度。

如何修复脚本？

Answer 1

是的，有一个简单的方法。但首先：你的画廊脚本计算里面所有图像的平均纵横比。没有简单的方法可以改变这种行为。

但是您可以执行这个简单的解决方法：将 echt 两张图片放在各自的图库中！

var gallery1 = new Gallery($('#gallery_images_inner1'));
var gallery2 = new Gallery($('#gallery_images_inner2'));
var gallery3 = new Gallery($('#gallery_images_inner3'));

见http://jsfiddle.net/mZ2Ks/2/ - 我不得不稍微清理一下你的html代码 - 你从（我假设）firebug复制了“受javascript影响”的html代码，但你应该直接从源代码复制纯html（CTRL + U 在 Firefox 中）。