在水平和垂直方向上调整一组不同大小的图像的大小-需要帮助优化

Question

警告代码在除GOOGLE CHROME之外的所有浏览器中崩溃

我试图在我们的网站上创建一个功能，采取8随机图像，并将它们放在两行，并动态调整图像大小，以占据整个页面的宽度。

我已经为此创建了一个jsbin来尝试和演示这个问题。

https://jsbin.com/yijemazovi/edit?html,css,js,output

代码中的注释应该会让您对我正在做的事情有一个很好的了解。除了Google Chrome之外，似乎所有的事情都在发生，while条件永远不会满足，所以它会无限地继续下去，导致浏览器崩溃。

也许它就像我不正确地做do/while循环一样简单，或者我应该只使用while循环？

如有任何帮助，我们不胜感激！

/*****
 * Get the overall width of the container that we want to match
 **********/
var ContainerWidth = $('.feature-inim-collage .col.span_1_of_1').width();


/*****
 * Increase the height of the images until the total sum of the width 
 * if the 4 images + the gutters is larger than ContainerWidth - then 
 * stop
 **********/

/*****
 * Increment in jumps of 10px until we get within 80% of the width of 
 * the ContainerWidth and then go to a more precise increment of 1px.
 * We can increase the px from 10 to 20 or 30 so there are less loops
 * but this can cause issues when we look at mobile and there is less
 * overall width in the containers and jumping by 30px will be too much
 **********/
var i = 0;
do {
  $('.feature-inims-top-row .growable-container').css('height', i);
  var RowWidth1 = CalculateTotalWidth(1);
  if(RowWidth1 < (ContainerWidth*0.8)){
    i = i+10;
  }else{
    i++;
  }
}
while (RowWidth1 < (ContainerWidth - 3));

/*****
 * Repeat above for the 2nd row
 **********/
var i = 0;
do {
  $('.feature-inims-bottom-row .growable-container').css('height', i);
  var RowWidth2 = CalculateTotalWidth(2);
  if(RowWidth2 < (ContainerWidth*0.8)){
    i = i+10;
  }else{
    i++;
  }
}
while (RowWidth2 < (ContainerWidth - 3));

/*********
 * Calculate the combined width of the images + the gutters
 ****/
function CalculateTotalWidth(Row) {
  var Image1Width = $('.growable-container-1').width();
  var Image2Width = $('.growable-container-2').width();
  var Image3Width = $('.growable-container-3').width();
  var Image4Width = $('.growable-container-4').width();
  var Image5Width = $('.growable-container-5').width();
  var Image6Width = $('.growable-container-6').width();
  var Image7Width = $('.growable-container-7').width();
  var Image8Width = $('.growable-container-8').width();
  var GutterSize = 24; // (3 gutters @ 8px each)

  if(Row == 1){
    var RowWidth = GutterSize + Image1Width + Image2Width + Image3Width + Image4Width;
  }else{
    var RowWidth = GutterSize + Image5Width + Image6Width + Image7Width + Image8Width;
  }
  return RowWidth
}

Answer 1

问题在于，在CalculateTotalWidth()函数中，我检查的是图像所在容器的宽度，而不是图像本身。一旦我改变了这一点，它就完美地工作了。

var Image1Width = $('.growable-container-1 img').width();

而不是

var Image1Width = $('.growable-container-1').width();