Как ограничить высоты элементов конкретными значениями («ступенчатыми») на основе содержимого

Question

Есть ли способ достичь, я не могу описать его лучше, «ступенчатые высоты» на div? Я сделал немного fiddle, чтобы отобразить то, что у меня есть.

Моей целью является то, что каждая коробка имеет высоту, кратную 400 пикселей. Так что если ящик с height: auto; будет 345px, он должен быть 400 пикселей, если он составляет от 400 до 800 пикселей, он должен быть 800 пикселей и так далее. К сожалению, я не нашел ничего полезного для достижения этого. Есть идеи?

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>

Answer 2

Вот версия с помощью JQuery, которая устанавливает каждую коробку с точностью до "400px шаг" высотой.

$('div').each(resize); 
 

 
function resize(){ 
 
    var height = $(this).css("height"); 
 
    var newHeight = Math.ceil(parseInt(height)/400) * 400; 
 
    $(this).css('height', newHeight+'px'); 
 
}

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

 
div { 
 
    width: 30%; 
 
    margin-right: 3%; 
 
    float: left; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
div:last-child { 
 
    margin-right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem 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 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem 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 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>