Question

在我的页面上，我有6个div，分为两行，每行三个。我正在使用jQuery函数给它们一个高度，以便它们始终是具有最高内容的div的高度。当我加载页面时，有时这是有效的，有时它不会。大多数情况下，它不会和divs比他们的内容短。有时当我点击刷新时，它们将延伸到最高div的高度。我不确定是什么原因引起的。该功能位于文档内部。

我应该注意，jQuery函数在我的本地文档中一致，但不在GitHub中。

以下是网站：http://amykirst.github.io/portfolio/

div在“查看我的工作”下。

这是jquery：

$(document).ready(function() {
  // alert("document is ready!");
  applyHeight();
  $('.menu-toggle').click(function(e) {
    $('.menu').toggleClass('open');
    e.preventDefault();
  });
  $(window).on('resize', function() {
    applyHeight();
  });
}); // End document ready

// size samples to equal heights

// function to determine the tallest element
function equalHeight(block) {
  // Set tallest height to 0
  var tallest = 0;
  // Iterate over each block
  block.each(function() {
    // Creates variable and stores height for current element
    var thisHeight = $(this).height();
    // If current element's height is greater than 0 (or the tallest),      then it becomes the tallest
    if (thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
   // Sets all block heights to the height of the tallest element
  block.height(tallest);
}

// function to apply equal heights
function applyHeight() {
  // If the sample is 300px wide run equal height function
  if ($(".sample").css("width") == "300px") {
    equalHeight($(".sample"));
    // If the sample is not 300px wide, set height to auto
  } else {
    $(".sample").css("height", "auto");
  }
}

Answer 1

加载DOM后，

$(document).ready()会立即触发，即使图像不是。为此，您需要等到所有内容都加载完毕。 $(window).load()这样做：

$(window).load(applyHeight);

（为简单起见，我将applyHeight函数作为参数传递。）

Answer 2

$(window).load(function() { applyHeight(); });

修改

$（window）.load（） - 在加载内容后触发，包括图像。

加载图像后，您可以计算高度

Answer 3

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

jQuery没有一贯地调整div的大小 - 相等的高度div

3 个答案: