Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2019, 15:54
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Делаю плиточную сетку, не могу понять, как работать с каждой строкой
Делаю плиточную сетку, не могу понять, как работать с каждой строкой. Все работает, но только для одной строки. Суть такая: есть предыдущая строка, в ней есть элементы, из этих элементов забираем высоту каждого. И есть следующая строка, в которой мы забираем из элементов 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, 30.01.2019 в 15:56.
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2019, 16:40
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

А зачем так работать с каждой строкой, что должно получиться в итоге?
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2019, 16:45
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Из каждой предыдущей строки нужно получить высоту элементов, из каждой следующей строки — оффсет элементов и добавить к этим элементами отрицательный маржин (-оффсет элементов этой строки + высота элементов предыдущей строки). Получится должно, как на первом скриншоте
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2019, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

DrewSherwood,
ваши картинки недоступны, сложно понять что вы хотите сделать, нужен макет.
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2019, 16:52
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

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


Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2019, 17:17
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

DrewSherwood, а чего они друг на друга заползли на второй картинке, зачем ты их так сделал?
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2019, 17:35
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Сообщение от Rise Посмотреть сообщение
DrewSherwood, а чего они друг на друга заползли на второй картинке, зачем ты их так сделал?
там стояла полупрозрачность у фона, вот сделал сплошной цвет
Для второй строки считается все как нужно, а вот для третьей нет

up

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


Последний раз редактировалось DrewSherwood, 30.01.2019 в 17:44.
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2019, 18:36
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Результат должен таким получиться?
<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>

Последний раз редактировалось Dilettante_Pro, 30.01.2019 в 18:39.
Ответить с цитированием
  #9 (permalink)  
Старый 30.01.2019, 19:01
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Сообщение от 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>
да, должно получится именно так
Ответить с цитированием
  #10 (permalink)  
Старый 30.01.2019, 19:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от DrewSherwood
да, должно получится именно так
А надо с элементами на странице? Тогда типа такого

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

Последний раз редактировалось laimas, 30.01.2019 в 19:31.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Регулярное выражение, из учебника. Ни как не могу понять emptinessandform Общие вопросы Javascript 4 10.04.2015 18:48
не могу понять как работает him Общие вопросы Javascript 1 05.01.2014 00:20
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
помогите уже месяц не могу понять как это сделать... CTEPEOTUn Общие вопросы Javascript 5 13.04.2011 00:21
Не могу понять как работает jQuery kostiaGt jQuery 2 20.07.2008 08:42