javascript - 使用 Javascript 的等高列

Question

我正在尝试做某种胰蛋白 enzyme ，其中列表中的第一项比第二项和第三项更加突出。

我已经做到了添加第二个和第三个高度并将所述高度应用于第一个元素的地步。但在尝试让设计万无一失时，我需要它能够很好地反过来玩。

例如，如果第一项的高度值大于第二项和第三项的总和，则将差异应用到某处(第二项或第三项)...如果这一切看起来令人困惑，我们深表歉意。

这是代码:http://codepen.io/randydaniel/pen/uKkfb

var equalHeights = function(cols) {

$(cols).each(function() {
  var colTwo = parseInt($('#blog-listing li:nth-child(2)').css('height').replace("px", "")),
    colThree = parseInt($('#blog-listing li:nth-child(3)').css('height').replace("px", ""));

    var extra = colTwo + colThree;
    $(cols).css('height',extra);
  });
};

$(document).ready(function() {
  equalHeights($("#blog-listing li:first-child"));
});

免责声明:我不太了解 javascript，因为我正在重新利用之前示例中的一些代码，而 flexbox(如果可能)目前不是一个选项。

Answer 1

因为你已经在使用 jquery，你可以这样做

    var equalHeights = function(cols) {

    $(cols).each(function() {
      var colTwo = $('#blog-listing li:nth-child(2)').height();
      var colThree = $('#blog-listing li:nth-child(3)').height();
      var colOne = $('#blog-listing li:nth-child(1)').height();

      var extra = colTwo + colThree;
      if(extra > colOne){
        $(cols).height(extra);
      }else{
        // split the difference between nodes height
        var split = (colOne - extra)/2;
        $('#blog-listing li:nth-child(2)').height(colTwo+split)
        $('#blog-listing li:nth-child(3)').height(colThree+split)
      }
  });
  };

  $(document).ready(function() {
    equalHeights($("#blog-listing li:first-child"));
  });