Форум

DrewSherwood · #11 (**permalink**) 30.01.2019, 21:55

Сообщение от laimas

А надо с элементами на странице? Тогда типа такого

<style>
.row div {
    width: 100px;
    margin: 0 5px 5px 0;
    display: inline-block;
    vertical-align: top;
}
.blue div {
    background-color: #00f;
}
.red div {
    background-color: #f00;
}
.green div {
    background-color: #0f0;
}
</style>

<div class="row blue">
    <div style="height:50px"></div>
    <div style="height:90px"></div>
    <div style="height:30px"></div>
</div>
<div class="row red">
    <div style="height:15px;"></div>
    <div style="height:55px"></div>
    <div style="height:34px"></div>
</div>
<div class="row green">
    <div style="height:80px"></div>
    <div style="height:20px"></div>
    <div style="height:38px"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var offset = [0, 0, 0], max;
$('.row').each(function(i, e) {
    if(!i) {
        $(e).children().each(function(k, o) {
            offset[k] += o.offsetHeight
        })
    } else {
        max = Math.max(...offset);
        $(e).children().each(function(k, o) {
            offset[k] += $(o).css({marginTop: -(max-offset[k])}).height()
        
        })
    }
})
</script>

Супер! Но только один вопрос, как передать в offset = [0, 0, 0] количество элементов в строке? чтобы там были не цифры, а $('.col').lenght()?

laimas · #12 (**permalink**) 31.01.2019, 06:56

Имеется ввиду создание этого массива динамически по количеству элементов? Тогда

var offset = new Array($('.col').lenght()).fill(0), ...

Но .fill() не поддерживается IE (собственно со стороны браузера должна быть поддержка и Math.max(...offset)), что у вас по плану с этим не знаю, поэтому тут описан и полифилл, если что.

А можно взять первую строку элементов, заполнить массив их высотами, а далее уже брать срез строк начиная со второй для обхода в цикле (как у вас и было в коде).

Либо код подправить так:

var offset = [], max;
$('.row').each(function(i, e) {
    if(!i) {
        $(e).children().each(function(k, o) {
            offset.push(o.offsetHeight)
        })
    } else { //.....

Rise · #13 (**permalink**) 31.01.2019, 12:49

DrewSherwood, можно было так через float, есть еще flex и grid.

<!doctype html>
<title>Grid</title>

<style>
.column {
    width: 25%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
    border: 1px dotted blue;
}
.cell {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dotted red;
}
</style>

<div class="column">
    <div class="cell">1-1<br><br><br><br></div>
    <div class="cell">1-2<br><br></div>
</div>
<div class="column">
    <div class="cell">2-1<br><br><br></div>
    <div class="cell">2-2<br><br></div>
</div>
<div class="column">
    <div class="cell">3-1<br><br><br><br><br></div>
    <div class="cell">3-2<br><br><br></div>
</div>
<div class="column">
    <div class="cell">4-1<br><br></div>
    <div class="cell">4-2<br><br><br><br></div>
</div>

Форум

Справочник

Discord чат

Курсы javascript