Одинаковая высота колонок в каждом ряду

sigma77 · June 16, 2011

Привет,

Задача следующая:

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

Вот что имеется на текущий момент: http://jsfiddle.net/RzC4q/

Но мне кажется, что тут всё криво и код можно улучшить, либо вообще всё сделать по-другому. Как говорит дядя s0rr0w "jquery головного мозга".

В общем-то не обязательно даже код, достаточно алгоритма.

Спасибо

Great Rash · June 16, 2011

Совершенно четко видны симптомы "jquery головного мозга" (С) :lol:

Я приведу маленький кусочек кода, который должен все прояснить:


alert(Math.max(0, 150, 30, 20, 38));

sigma77 · June 16, 2011

Great Rash,

Хорошо. Это мне понятно. Мне не понятно как последовательно получать значения каждой группы из четырех блоков.

Т.е. получаем высоты с 1 - 4, определяем из них наибольшую, далее 5 - 8 из них наибольшую, 9 - 12 и т.д.

psywalker · June 16, 2011

Лови подруга

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	#wrap {}
	#wrap div { float: left; width: 30%; margin: 0 1%; background: red;}
</style>
</head>

<body>
<div id="wrap">
<div class='div'>
	<p>    text text text text text text text text text text text text text text text text text text text text text text text text
      text text text text text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text text text
         text text text text text text text text text text text text text text text text text text text text text text text text
          text text text text text text text text text text text text text text text text text text text text text text text text
           text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text text text text
             text text text text text text text text text text text text text text text text text text text text text text text text</p>

</div>
<div class='div' style="background: yellow;">
	<p>    text text text text text text text text text text text text text text text text text text text text text text text text
      text text text text text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text text text text text
       </p>
</div>
<div class='div' style="background: green;">
	<p>    text text text text text text text text text text text text text text text text text text text text text text text text
      text text text text text text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text t</p>
</div>
</div>
<script type="text/javascript">

	window.onresize = resize;
	window.onload = resize;
	function resize(){
		var div = document.getElementById('wrap').getElementsByTagName('div');
		var n = 0;

		for(var i=0;i<div.length;i++){
			if(div[i].className == 'div'){
				div[i].style.height = 'auto';
				if(div[i].offsetHeight>n) n = div[i].offsetHeight;
				div[i].style.height = n+'px';
			}
		}		
	}
</script>
</body>

</html>

ctpz · June 16, 2011

У тебя нигде не указывается, что это jQuery код. Также были коряво расставленны знаки.

Я все это исправил. Это тот же код, но только с исправленными замечаниями.


$(document).ready(function(){
var li = $('li'),
    liHeight,
    heightMax,
    rowLi; 
for (var i = 0, max = li.length; i < max; i += 4) { 
    heightMax = 0;
    rowLi = li.eq(i);
    for (var j = 0; j < 4; j++) { 
        rowLi = rowLi.add(li.eq(i + j)); 
        liHeight = li.eq(i + j).height();
        heightMax = liHeight > heightMax ? liHeight : heightMax};
    rowLi.css('height', heightMax)};
});

Great Rash · June 16, 2011

Я тут подправил немного код...

http://jsfiddle.net/RzC4q/1/

И даже можно еще улучшить

http://jsfiddle.net/RzC4q/3/

sigma77 · June 16, 2011

Лови подруга

Спасибо, но это немного не то. У тебя все колонки получаются одинаковые, т.е. если добавить еще 3 колонки, то все 6 будут одного размера

У тебя нигде не указывается, что это jQuery код. Также были коряво расставленны знаки.

В данном случае указывать, что это jQuery не нужно. Это задается в настройках самого сервиса. Что касается знаков, то лично я расставляю их именно так. Так как это делается значительной частью разработчиков. Ты же можешь расставлять их у себя, как тебя заблагорассудится.

И даже можно еще улучшить
http://jsfiddle.net/RzC4q/3/

Ух ты! Вот это круто. Спасибо. До этого if (!(i % 4)) я бы никогда не додумалась

psywalker · June 17, 2011

Ух ты! Вот это круто. Спасибо. До этого if (!(i % 4)) я бы никогда не додумалась

Да, присоединяюсь. Круто!

s0rr0w · June 17, 2011

Я тут подправил немного код...
http://jsfiddle.net/RzC4q/1/
И даже можно еще улучшить
http://jsfiddle.net/RzC4q/3/

А можно еще чуток

http://jsfiddle.net/aW45h/1/

Чуть более заумно, но еще чуть более гибко

sigma77 · June 17, 2011

А можно еще чуток
http://jsfiddle.net/aW45h/1/
Чуть более заумно, но еще чуть более гибко

Спасибо, попозже посмотрю

psywalker · June 17, 2011

Оксан, и я так же не мог пройти мимо и не сделать для тебя решение. Правда оно тоже весоменькое, НО зато универсальное и для резины!

http://jsfiddle.net/aW45h/5/

sigma77 · June 24, 2011

Оксан, и я так же не мог пройти мимо и не сделать для тебя решение. Правда оно тоже весоменькое, НО зато универсальное и для резины!
http://jsfiddle.net/aW45h/5/

Клёво! Спасибо

psywalker · June 24, 2011

Оксан, и я так же не мог пройти мимо и не сделать для тебя решение. Правда оно тоже весоменькое, НО зато универсальное и для резины!
http://jsfiddle.net/aW45h/5/
Клёво! Спасибо

Не за что, пользуйся на здоровье

Sign In

Одинаковая высота колонок в каждом ряду

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information