javascript - 基于每 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

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

但是您可以使用这个简单的解决方法:将两张图片放入各自的图库中!

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(Firefox 中的 CTRL + U)。