javascript - 使所有 float div 具有相同高度的脚本

Question

嘿，我有 20 个 div 以不同的高度向左浮动。我使用这个脚本来调整它们的大小。当我的网站使用像素设计时，它运行得非常好。

当我将我的网站更改为 % design(百分比设计)时，脚本不再可靠地工作，有时它不会调整大小。

你能看一下，液体布局是否需要任何调整吗？

也许这是我调用脚本的方式？

非常喜欢

这里是:

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

 // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
 $('div.column').each(function(index) {

  if(currentRowStart != $(this).position().top) {

   // we just came to a new row.  Set all the heights on the completed row
   for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

   // set the variables for the new row
   rowDivs.length = 0; // empty the array
   currentRowStart = $(this).position().top;
   currentTallest = getOriginalHeight($(this));
   rowDivs.push($(this));

  } else {

   // another div on the current row.  Add it to the list and check if it's taller
   rowDivs.push($(this));
   currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);

  }
  // do the last row
  for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

 });

}

$(window).resize(function() {
 columnConform();
});

$(document).ready(function() {
 columnConform();
});

Answer 1

好吧，如果您将它更改为流体布局(% 设计)，那么您将不得不添加一个窗口调整大小监听器，基本上当调整大小事件完成或运行时，您需要调用脚本以便它可以重新计算新尺寸，您不需要用像素来做，因为它是固定尺寸，并且一旦分配，无论您调整实际屏幕大小多少次都不会改变。