Discovering the explore section on Flickr was quite intriguing for me:
I found it impressive how they showcase pictures in various sizes and how the layout adapts when you resize the browser window.
[UPDATE] How do you think one could create a similar display without relying on the masonry library as mentioned in the comment below? I've been tinkering with some JavaScript pseudo code, trying to figure out a logic that might work. Any thoughts on this approach? How could we turn it into a functional library?
var rowWidhtPx=document.getElementById('gridContainer').offsetWidth;;
var maxRowHeightPX= 300;
var minRowHeightPX= 200;
var imageArray=[
{
src:'somesrc',
width:200,
height:300,
},
...
,{
src:'somesrc',
width:200,
height:300,
}
];
var rowMatrix;
var rowsIndex=0;
rowMatrix[rowsIndex].setHeight(maxRowHeightPX);
imageArray.forEach(function (img,index){
img.scaleHeight(maxRowHeightPX);
if(rowMatrix[rowsIndex].actualWidth+img.widht<rowWidhtPx){
rowMatrix[rowsIndex].push(img);//set margin gutter to prev image
}else{
rowMatrix[rowsIndex].scaleHeight(minRowHeightPX) ;//scale also image heights
if(rowMatrix[rowsIndex].actualWidth+img.scaleHeight(minRowHeightPX)<rowWidhtPx ){
rowMatrix[rowsIndex].push(img);
}else{
rowMatrix[rowsIndex].setOptimalHeight();
//starting from minimum height, take total widht and set it to rowWidthPX, and scale the height accordingly
//then takes single images and set also the height
rowsIndex++; // add new row
}
}
});