Делаю плиточную сетку, не могу понять, как работать с каждой строкой

[DrewSherwood]

Делаю плиточную сетку, не могу понять, как работать с каждой строкой. Все работает, но только для одной строки. Суть такая: есть предыдущая строка, в ней есть элементы, из этих элементов забираем высоту каждого. И есть следующая строка, в которой мы забираем из элементов offset().top. И пишем для элементов следующей строки верхний отрицательный маржин (-оффсет элементов следующей строки + высота элементов предыдущей строки). Все работает, но только для одной строки, как сделать так, чтобы скрипт работал со всеми предыдущими/следующими строками?

var g = 50, off = [], h = [], total = [];

$('.row').prev().children().each(function(j){
		h[j] = $(this).height();		
	});

$('.row').next().children().each(function(i){
	
	off[i] = $(this).offset().top;
	total[i] = -off[i]+h[i];
	$(this).css('margin-top', + total[i] + g + 'px');
	
});

$('h2').text('height: ' + h + ' | ' + 'offset: ' + off);

[Rise]

А зачем так работать с каждой строкой, что должно получиться в итоге?

[DrewSherwood]

Из каждой предыдущей строки нужно получить высоту элементов, из каждой следующей строки — оффсет элементов и добавить к этим элементами отрицательный маржин (-оффсет элементов этой строки + высота элементов предыдущей строки). Получится должно, как на первом скриншоте

[рони]

DrewSherwood,
ваши картинки недоступны, сложно понять что вы хотите сделать, нужен макет.

[DrewSherwood]

DrewSherwood,
ваши картинки недоступны, сложно понять что вы хотите сделать, нужен макет.

Странно, в шапке поста я их вижу

[Rise]

DrewSherwood, а чего они друг на друга заползли на второй картинке, зачем ты их так сделал?

[DrewSherwood]

DrewSherwood, а чего они друг на друга заползли на второй картинке, зачем ты их так сделал?

там стояла полупрозрачность у фона, вот сделал сплошной цвет
Для второй строки считается все как нужно, а вот для третьей нет

up

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

[Dilettante_Pro]

Результат должен таким получиться?

<style>
.cell {
    position:absolute;
    width: 150px;
}
</style>
<div class="cont">
</div>
<script>
var container = document.querySelector(".cont");
var color = ["red","blue","green"],
tp = [], height = [];
for(var i=0;i<3;i++){
   tp[i] = []; height[i] = [];
   for(var j=0;j<4;j++){
       var cell = document.createElement('div');
       cell.style.backgroundColor = color[i];
       cell.style.left = (10 + j * 160 ) + "px";
       height[i][j] = Math.random() * 130 + 20;
       cell.style.height = height[i][j] + "px";
       tp[i][j] = i == 0? 10:(tp[i - 1][j] + height[i - 1][j] + 10) ;   
       cell.style.top = tp[i][j] + "px";
       cell.classList.add("cell");
       container.appendChild(cell);
   }
}
</script>

[DrewSherwood]

<style>
.cell {
    position:absolute;
    width: 150px;
}
</style>
<div class="cont">
</div>
<script>
var container = document.querySelector(".cont");
var color = ["red","blue","green"],
tp = [], height = [];
for(var i=0;i<3;i++){
   tp[i] = []; height[i] = [];
   for(var j=0;j<4;j++){
       var cell = document.createElement('div');
       cell.style.backgroundColor = color[i];
       cell.style.left = (10 + j * 160 ) + "px";
       height[i][j] = Math.random() * 130 + 20;
       cell.style.height = height[i][j] + "px";
       tp[i][j] = i == 0? 10:(tp[i - 1][j] + height[i - 1][j] + 10) ;   
       cell.style.top = tp[i][j] + "px";
       cell.classList.add("cell");
       container.appendChild(cell);
   }
}
</script>

да, должно получится именно так

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