Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Question

[Rustam Bainazarov]

Товарищи, здравствуйте!

Я страдал фигней и сделал аж целое интерактивное эссе, в чем заключается моя задача:


В песочнице выше -- я описал все, что нужно, но продублирую сюда. Сразу скажу, что я в JavaScript -- словно заяц в космосе, т. е. мёртвый абсолютно. Вопрос такой: нужно сделать тень под блоком, как на divan.ру (к примеру, тут). Когда наводишь на карточку товара, под ней появляется блок с тенью, а также блок к кнопкой и дополнительной информацией. Оба блока на абсолютном позиционировании. Блок с информацией кнопкой может иметь разную высоту, что сразу отметает возможность задавать жесткий размер тени с учетом высоты этого блока. Там используется JS по причине невозможности сделать данный расчет на CSS.

В песочнице есть убогий неработающий скрипт-попытка на JQuery, но это даже стыдно обсуждать.

Подскажите пожалуйста, в каком направлении двигать в данном случае, может, есть примеры, спасибо!

P. S. Наверное, я неверно описал задачу -- просто я косой, извините.

Comments

[Ярослав Иванов]

Это самый лучший пример кода в вопросе, который я когда либо видел) сейчас посмотрим, интересная задача.

[Ярослав Иванов]

Так ? https://jsfiddle.net/j0hzu8nx/15/

[Ярослав Иванов]

var shadow = $(this).find('.shadow');
var button = $(this).find('.button');

shadow.height(shadow.height() + button.height() + 20)

[Rustam Bainazarov]

Ярослав Иванов, боже, камрад, спасибо! То, что надо. Я пипец тупой и синтаксиса языка не знаю. Я попытался объединить твой код и предложенный Арсений Матыцин вариант (чтобы функция срабатывала на :hover'е), вышло так:

$("figure.item").hover (
	function() {
		var shadow = $(this).find('.shadow');
    		var button = $(this).find('.button');
    		shadow.height(shadow.height() + button.height() + 20)
	}, function() {
		$(this).find(".shadow").css("height","");
	}
);

Это не слишком пипецово? Метод работает, но я уже боюсь.

[Ярослав Иванов]

SmthTo, зачем при ховере насиловать DOM? Пускай при загрузке сайта или ajax'a выполняется.

[Ярослав Иванов]

SmthTo, если нужно сбросил высоту то лучше так height(0)

[Rustam Bainazarov]

Ярослав Иванов, мне до AJAX -- как до луны верхом на пони :))

Там ещё событие изменения ширины контейнера на всякий случай, что приведет к необходимости пересчета высоты каждого блока. На странице изначально 64 ед. товара, может а быть и полный список.

Конечно, человек ещё будет со мной работать над реализацией, просто хотелось понять хочется алгоритм самому, иначе неинтересно совсем, сам понимаешь.

Вариант с height(0) не работает должным образом. Думаю, потому, что он ставит эту высоту (0px), когда mouseleave, а при новом hover'е он именно этот нуль берет за основу расчета, что ломает тень.

$("figure.item").hover (
	function() {
		var shadow = $(this).find('.shadow');
    	var button = $(this).find('.button');
    	shadow.height(shadow.height() + button.height() + 20)
	}, function() {
		$(this).find('.shadow').height(0);
	}
);

[Rustam Bainazarov]

Ярослав Иванов, ты напиши свое решение как ответ, я его отмечу решением и сделаю комментарий касательно альтернативного подхода через :hover. Спасибо!

Answer 1

[Ярослав Иванов]

https://jsfiddle.net/j0hzu8nx/15/

var shadow = $(this).find('.shadow');
var button = $(this).find('.button');

shadow.height(shadow.height() + button.height() + 20)

Answer 2

[Rustam Bainazarov]

Комбинируя ответ Ярослав Иванов, идею касательно hover'а от Арсений Матыцин и делегирование функций, на нативном JS можно сделать так:

// наведение
document.body.addEventListener("mouseenter", function(e) {
  if (e.target.classList.contains('item')) {
 
    let item = e.target;
    let itemShadowGap = 15;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemBottom = item.querySelectorAll('.button')[0];
    let itemShadowHeight = itemShadow.scrollHeight + itemBottom.scrollHeight + itemShadowGap;

    // проверяем, нет ли атрибута
    if (!item.hasAttribute('data-shadow-limiter-delay')) {
      item.setAttribute('data-shadow-limiter-delay', true);
      itemShadow.style.maxHeight = '' + itemShadowHeight + 'px';
    }

    item.style.zIndex = '10';
    itemShadow.style.height = '' + itemShadowHeight + 'px';

  }
}, true);

// отведение
document.body.addEventListener("mouseleave", function(e) {
  if (e.target.classList.contains('item')) {
  
    let item = e.target;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemShadowHeight = itemShadow.scrollHeight;

    // убираем максимальную высоту и атрубут по задержке
    if (item.hasAttribute('data-shadow-limiter-delay')) {
      setTimeout(function() {
        item.removeAttribute('data-shadow-limiter-delay');
        itemShadow.style.maxHeight = '';
      }, 3000);
    }

    item.style.zIndex = '';
    itemShadow.style.height = '';

  }
}, true);

Таким образом решается вопрос с адаптивностью (высота считается при каждом hover'e), а также функция работает с динамически созданными элементами. Проверил на старом ноутбуке (мобильный Core i5 2-го поколения, 4 Гб ОЗУ и встроенная видеокарта; FireFox, Chrome, IE11), нет никаких задержек обработки скрипта в условии наличия 600 ед. элементов. И это с учетом всех остальных скриптов на сайте.

Answer 3

[Арсений Матыцин]

Подход к вопросу огонь. Но. Как по мне, тут js не шибко и нужен. +- хватит танцев с бубном на css, путем осознания того, что в общем информация статична, и высчитывать шибко и нечего. Ну и немного абсолютного позиционирования и хаков.
Но если действительно стоит необходимость сделать, так сказать, умную сетку, то можно перебирать их всех после полной загрузки DOM, или же еще лучше, индивидуально в момент hover. К слову, jQuery можно... В общем чистый JS нынче в треде, как говорится. Итак, ближе к конкретике:

1. Спаси и сохрани размер обертки карточки, назовем ее ячейкой
   
2. Задай самой карточке абсолютное позиционирование относительно ячейки
   
3. Задисплей через прозрачность (к примеру) дополнительные элементы
   
4. Рассчитай их размеры и, как в примере на дверях, высчитай отступ наверх
   

Ну и главное, проверь, чтобы у ячейки не стял overflow:hidden. Бо плохо будет.
З.Ы.: кроме морды из примера я ничего не увидел. Ну и пункты могут варьироваться.

Comments

[Rustam Bainazarov]

К сожалению, JS нужен, т. к. подложка (.shadow) и блок с кнопками и доп. информацией -- оба на абсолютном позиционировании. Рассчитать заранее высоту .shadow, чтобы он покрывал собой и блок с кнопкой нельзя, т. к. последний может иметь у каждой карточки разную высоту.

К сожалению, составной подход (визуальное совмещение двух подложек), который предложил Максим Ленский, тоже не подходит в данном случае из-за полупрозрачной размытой тени.

Спасибо за пункты, буду думать, как реализовать! Касательно JQuery -- полностью согласен, но в том проекте JQuery повсюду, поэтому пусть будет он :))

[Арсений Матыцин]

https://codepen.io/i-am-studio_ru/pen/PXBwyy?edito...

Собсно, как я и говорил можно JS послать куда подальше

[Rustam Bainazarov]

Арсений Матыцин, как я и говорил, концепция данного подхода разрушается, если высота блоков сильно отличается в рамках строки (у кого-то название больше, у кого-то больше описание в блоке с кнопкой):


Как видите, при наведении высота скачет, поэтому скачет и последующая строка, т. к. у вас есть .boxbtn статически позиционирован.

[Rustam Bainazarov]

Арсений Матыцин, а если добавить доп. правила с учетом необходимости выравнивания семантических элементов по одной линии (линия текста названия, линия цены), получается ещё веселее (скачет высота + зона кнопки и контента стала вылетать за пределы):

[Rustam Bainazarov]

Словом, если бы не полупрозрачная тень с сильным размытием, то я вполне знаю метод (визуальный хак), как обойтись без JS и в той же верстке, что представлена в вопросе, но в данном случае и с данными потребностями -- без JS никак.

[Арсений Матыцин]

SmthTo, ну все еще JS в... туда, но такой вариант вполне.
https://codepen.io/i-am-studio_ru/pen/PXBwyy

Это и есть первый пункт моего первого ответа.
Ну и как я там уже где-то сверху писал, при динамичной подгрузке надо насколько видоизменить код для проверки.

[Rustam Bainazarov]

Арсений Матыцин, при добавлении разного по высоте контента, скачет :))

JS-код тоже перенес. Акцент на второй блок:


В любом случае, думаю, что на JS стоит отдавать подсчет только высоты блока с тенью, который повешен на абсолютное позиционирование и не меняет никаких габаритов. Т. е. чтобы все остальное считалось браузером с помощью CSS. Такой подход к реализации данной проблемы испооьзуется на divan.ru (сейчас), mvideo.ru (раньше), leroymerlin.ru (раньше) и svyaznoy.ru (раньше).

[Арсений Матыцин]

SmthTo, Не скачет. Я обновил пример с увеличением заголовка.
В данном случае flexbox определяет высоту строки (каждая новая строка будет иметь разную высоту, так как берется за высоту самый высокий элемент), а мини-код js просто этот размер фиксирует.

А JSFiddle по умолчанию тащит JS после обработки события onload. Можно поменять на no-wrap в любое место, тогда и там отработает.

[Rustam Bainazarov]

Арсений Матыцин, а-а-а, вот оно что, не знал о JSfiddle такого, т. к. пользоваться стал им только тут, спасибо!

Да, такой вариант работает, не совсем нравится, что он задаёт размер всему ряду, но он работает. Как видите, в случае разных размеров, без JS тут не обойтись, к сожалению.

[Арсений Матыцин]

SmthTo, размер всему раду задает свойство flexbox-а, а не js. JS всего-лишь его «запоимнает» инлайном.

[Rustam Bainazarov]

Арсений Матыцин, это я и имею в виду.

Все же сделал просчет по вашему совету на hover'e + полукосое делегирование + код от Ярослава, чтобы иметь возможность спокойно адаптировать и не переживать за необходимость просчета всех блоков в случае AJAX, изменении габаритов и тому подобного. Т. е. ставлю размер блока подложки в момент hover'a.