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像素。

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

应用高度：auto而不是100％将无法工作，因为它不会使图像适合垂直容器的高度。

如何修复脚本？

Answer 1

是的，有一种简单的方法。但是frist：你的gallery-script计算了里面所有图像的平均宽高比。没有简单的方法可以改变这种行为。

但是你可以做这个简单的解决方法：将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代码 - 你复制了＃34; javascript受影响的＆＃34;来自（我假设）firebug的html代码，但你应该直接从源代码中复制普通的html（在Firefox中使用CTRL + U）。

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

1 个答案: