GA - Collection Page

Layout plan

by Aldi Unanto

HTML

<!-- min width: 120px, max height: 150 -->
	<div class="container">
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/434/500" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/500/700" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>consectetur adipisicing elit.</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/1120/1648" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/100/150" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>consectetur adipisicing elit.</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/500/700" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>consectetur adipisicing elit.</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/100/150" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>consectetur adipisicing elit.</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/1120/1648" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
				<p>Eius aliquam possimus delectus maxime</p>
			</div>
		</div>
		<div class="item">
			<div class="box"><img src="http://lorempixel.com/434/500" alt=""></div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet</p>
			</div>
		</div>
	</div>

CSS

body{ margin: 0; }
		.container{ width: 63%; margin: 0 auto; border: 1px solid #000; }
		.item{
			vertical-align: bottom;
			display: inline-block;
			/*border: 1px solid #ff0000; */
			margin: 10px;
			width: 175px;
		}
		.item .box{
			/*border: 1px solid blue;*/
			display: block;
			text-align: center;
		}
		.item .box img{
			/*max-height: 196px;*/
			max-width: 150px;
			box-shadow: 3px 3px 5px #c2c1c1;
		}
		.item .desc{
			/*border: 1px solid green;*/
		}

JavaScript

var descHeight = 0;
$('.container .item').each(function(){
    $img = $(this).find('.box > img');
    var wExpect = 150;
    
    if($img.width() < wExpect){
        var height = wExpect / $img.width() * $img.height();
        $img.css({
            'width'		: wExpect,
            'height'	: height
        });
    }
    
    var curDescHeight = $(this).find('.desc').height();
    if(curDescHeight > descHeight) descHeight = curDescHeight;
    
}).promise().done(function(){
    $('.container .item .desc').css('height', descHeight);
});