Выгрузка товаров xls
Charlesmut
Тупо зачет!
2018-05-25 17:07:53
далее...


Микроразметка данных
Павел
Супер модуль для ShopSript. Хотя и обещают...
2015-12-14 23:08:41
далее...


Рассылка
Александр
Спасибо Алексею, за обновление модуля рассылки....
2015-03-24 22:12:52
далее...


Бэкап сайта
Евгений
Как можно брать деньги за бекапы, это же...
2015-03-18 20:24:12
далее...


Рассылка
Ольга
Рассылка - незаменимая вещь для связи с...
2015-02-18 18:47:10
далее...


Оглавление


Автовыравнивание блоков по высоте

2014-04-23

Все верстальщики рано или поздно сталкиваются с проблемой автовыравнивания блоков то ли по высоте, то ли по ширине.

В этой статье я раскажу вам как это сделать с помощью JS всего в несколько строк.

И так, допустим у нас есть блоки
Вроде нормально, но как мы видим они разной высоты, что не очень красиво, а если ещё и снизу появиться второй ряд, то выглядеть это всё будет совсем убожески.
Наша задача сделать, что бы у нас получился следующий вариант

А сделать это очень легко с помощью следующего кода:

$(window).load(function() {
var d = [];
$(".thumbnail").each(function(i,e){
d[i] = $(this).css("height").replace("px", "");
});
$(".thumbnail").css("height", Math.max.apply(Math, d)+"px");
});

 А теперь рассмотрим немного подробнее этих пару простых строк.
1-я строчка $(window).load(function() {
Тут мы просто ждём пока загрузиться полностью вся страница с контентом

Как мы видим у нас есть селектор .thumbnail это наши блоки, у нас их есть в данном случае 4, но может быть и больше, то есть мы имеем массив.
Функцией .each мы обходим весь массив наших блоков, и делаем выборку высоты блоков следующим кодом
d[i] = $(this).css("height").replace("px", "");
и в итоге мы получим простое числовое значение высоты блока без px.

Кодом  Math.max.apply(Math, d)  мы выбираем наибольшее значение из нашего массива.
Если допустим у нас  был массив чисел (100, 200, 300, 250 ......) то из этого массива наш код выше, выберет число 300.
Таким образом мы получим наибольшую высоту блока которые у нас есть, остаётся только присвоить это значение остальным блокам, дабы выровнять их, что и делает последняя строчка нашего кода:
$(".thumbnail").css("height", Math.max.apply(Math, d)+"px");

Как видите, здесь нет ничего сложного.

Надеюсь моя статья вам пригодиться.

  • Рейтинг 3.42/5
  • 1
  • 2
  • 3
  • 4
  • 5

Оценили: 26 человек; средняя оценка 3.4 из 5


Просмотров 1304 Комментариев 1

Все отзывы


Albit

Спасибо!Полезная доработка и главное вовремя.

2014-04-24 11:56:29

Все статьи


2017 © Slamm™