Количество элементов в строке

118

10 сентября 2019, 10:50

Нужно немного изменить скрипт. Сейчас количество элементов задается через переменную, в которой статически указывается количество элементов. Как сделать так, чтобы в эту переменную подставлялось автоматически количество элементов из строки?

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() 
         
        }) 
    } 
})

<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>

Количество элементов задается через первую переменную, если там объявить 4-5-6 и более цифр, то скрипт будет работать с таким количеством элементов. Вопрос в том, как в эту переменную подставлять количество элементов из строки, допустим из первой? Количество элементов в каждой строке одинаковое

Answer 1

var offset = [], max; 
$('.row').each(function(i, e) { 
    if(!i) { 
        $(e).children().each(function(k, o) { 
            if (typeof offset[k] == "undefined") 
              offset[k] = 0; 
            offset[k] += o.offsetHeight 
        }) 
    } else { 
        max = Math.max(...offset); 
        $(e).children().each(function(k, o) { 
            if (typeof offset[k] == "undefined") 
              offset[k] = 0; 
            offset[k] += $(o).css({marginTop: -(max-offset[k])}).height() 
        }) 
    } 
})

<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>

или

var offset = new Array($('.row:first div').length).fill(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() 
        }) 
    } 
})

<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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Количество элементов в строке

Размещение String[] в TextBox

TcpClient ReceiveTimeout и SendTimeout в C#

Дочерние элементы в префабе обьекта

Unity Cache Delete File (Delete AssetBundle)