Делаю плиточную сетку, не могу понять, как работать с каждой строкой
Делаю плиточную сетку, не могу понять, как работать с каждой строкой. Все работает, но только для одной строки. Суть такая: есть предыдущая строка, в ней есть элементы, из этих элементов забираем высоту каждого. И есть следующая строка, в которой мы забираем из элементов 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); |
А зачем так работать с каждой строкой, что должно получиться в итоге?
|
Из каждой предыдущей строки нужно получить высоту элементов, из каждой следующей строки — оффсет элементов и добавить к этим элементами отрицательный маржин (-оффсет элементов этой строки + высота элементов предыдущей строки). Получится должно, как на первом скриншоте
|
DrewSherwood,
ваши картинки недоступны, сложно понять что вы хотите сделать, нужен макет. |
Цитата:
|
DrewSherwood, а чего они друг на друга заползли на второй картинке, зачем ты их так сделал?
|
Цитата:
Для второй строки считается все как нужно, а вот для третьей нет up возможно так будет понятнее: синие элементы это элементы предыдущей строки в первой итерации, красный — элементы следующей строки в первой итерации, а серые полупрозрачные, это элементы следующей строки во второй итерации. но вот только в первой итерации все работает, а во второй элементы высчитывают отрицательный маржин неверно |
Результат должен таким получиться?
<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> |
Цитата:
|
Цитата:
<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> |
Часовой пояс GMT +3, время: 00:48. |