JQuery Based Faux Column

JavaScript
1

I have learnt about faux columns in one article at A list Apart. It said to repeat an image. From then, I tried to implent it with JQuery. I hope you would look into it.

Suppose you have three page columns in a div tag. To make it faux column, first give all of them a class “counter”. Put them all in a WRAPPER id’ed div Like this:

<div id="wrapper">
<div class="col1 counter>
...
</div>
<div class="col2 counter>
...
</div>
<div class="col3 counter>
...
</div>
</div>

And then, I created the below simple JQuery to create the faux column:

var count = $('#wrapper').find('.counter');
var maxheight=0;
for (var i=0; i < count.length; i++) {
	var count_height = $(count[i]).height();
	var count_next = $(count[i+1]).height();
	if (maxheight < count_height || maxheight < count_next) { 
		if (count_height > count_next) {
			maxheight = count_height;
		}
		else {
			maxheight = count_next;
		} 
	}
}

And then use this to change the css of each column dynamically:

$('#wrapper').find('.counter').each(function() {
	$(this).css('height',maxheight+3);
});

All that it does it compares the current columns height to it’s next. If the next one is bigger, the bigger one is stored in MAXHEIGHT, otherwise not. And the whole condition applies if only the MAXHEIGHT is less than the current and the next after the current column.

Give your opinions