如何根据内容将元素高度限制为特定值("步进")

Question

有没有办法实现,我无法更好地描述它,"基于步骤的高度"对div？我做了一个小小提琴,以显示我有什么.

我的目标是,每个盒子的高度都是400px的倍数.因此,如果一个盒子height: auto;是345px,它应该是400px,如果它在400到800px之间它应该是800px,依此类推.不幸的是,我没有找到任何有用的东西来达到这个 有任何想法吗？

Answer 1

在这里,我整理了一个示例片段,其中显示了一个非常简单的概念,即保持它们等于高,阶梯高度在 400,800,1200 之间.

Todo:更新脚本以动态设置元素或css而不是我的固定高度.如果你想在重新调整大小时重新计算,你还需要订阅同一个事件.

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  var childrenTags = parentTag.children;
  for (var i = 0; i < childrenTags.length; i++) {
    var childTag = childrenTags[i];
    childTag.style.height = "auto";
    childTag.style.height = (Math.ceil(parseInt(childTag.clientHeight) / 400) * 400) + "px";    
  }
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
    height: 400px;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>

如果你想要所有的盒子同样高,这个版本在"包装器"上计算高度而不是循环每个元素.

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  parentTag.style.height = "auto";
  parentTag.style.height = (Math.ceil(parseInt(parentTag.clientHeight) / 400) * 400) + "px";
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    height: 400px;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #bbb;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>