Оглавление
Автовыравнивание блоков по высоте
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");
Как видите, здесь нет ничего сложного.
Надеюсь моя статья вам пригодиться.
Просмотров 1304 Комментариев 1