Automatic Image Montage with jQuery

<div class="am-container" id="am-container">
 <a href="#"><img src="images/1.jpg" title="Image 1"></img></a>
 <a href="#"><img src="images/2.jpg" title="Image 2"></img></a>
 <a href="#"><img src="images/3.jpg" title="Image 3"></img></a>
 ...
</div>

.am-wrapper{
 float:left;
 position:relative;
 overflow:hidden;
}
.am-wrapper img{
 position:absolute;
 outline:none;
}

<div style="width:800px;height:300px;overflow-y:scroll; margin:40px auto;">
 <div class="am-container" id="am-container">
 ...
 </div>
</div>

// If you use percentages (or no width at all)
// for the container's width, then set this to true.
// This will set the body's overflow-y to
// 'scroll' (fix for the scrollbar's width problem)
liquid     : true, 

// Space between images in pixels
margin     : 1, 

// The minimum width that a picture should have
minw     : 70, 

// The minimum height that a picture should have
minh     : 20, 

// The maximum height that a picture should have
maxh     : 250, 

// Alternate the height value for every row.
// If true this has priority over defaults.fixedHeight
alternateHeight   : false,
// The height will be a random value between 'min' and 'max':
alternateHeightRange : {
 min : 100,
 max : 300
},

// If the following value is set, this will
// have priority over defaults.minsize.
// All images will have this height:
fixedHeight    : null, 

// Setting this value will make minw, minh irrelevant.
// Chosen height will be the one of the smallest image
// when this is set to true:
minsize     : false,

// If true, there will be no gap in the end
// of the container. The last image will
// fill any white space left:
fillLastRow    : false