Javascript.RU

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

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

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

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 { //.....

Последний раз редактировалось laimas, 31.01.2019 в 07:15.
Ответить с цитированием
  #13 (permalink)  
Старый 31.01.2019, 12:49
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Регулярное выражение, из учебника. Ни как не могу понять 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