Layout theory for a thumbnail gallery [closed]

Question

I am in the process of creating a thumbnail gallery exactly like this (http://tmv.proto.jp/#!/destroyftw). Currently I am trying to work out the theory for the scripting. The actual script for the webpage is here (http://tmv.proto.jp/tmv_v3.js). As I am relatively new to javascript this has caused me some frustration.

I have already tried using plugins such as masonry and isotope, but they are unable to handle massive amounts of images. Not to mention that infinite scroll doesn't work with filtering, which I need. So I decided to try my hand at coding one myself.

The idea is that user submitted images will be resized to thumbnails with a set width (height will of course be scaled to maintain aspect ratio). Then those thumbnails will be used to create the gallery. The problem I'm having is that the layout, I find, is a little tricky.

It appears that the page is first divided into columns to form the first "row". After that the thumbnails are place into the shortest column that is furthest to the left (Specifically, I'd like to know the theory behind this particular image positioning technique.). Ex: The numbers can also be understood as the image's id. (id="i_1",id="i_2"etc...)

This also causes the cascading fade-in effect that the page does onload and when new images are appended (they're simply fading in according to their id's). I have tried to use the above script page as a reference to no avail. But if anyone would like to check for themselves the functions that I believe are responsible for the thumbnail positioning are under "ViewManager".

Just to reiterate, I am not looking for someone to do my work for me. I just need help working out the theory so I will have somewhere to start.

**Note**(In the script): cellSize= 100; cellMargin=1; doubleSize=201 (cellSize*2+cellMargin); totalCellSize=101 (cellSize+cellMargin);

Answer 1

Have a look at

var fixedwidth = 50 + 1, //the +1 is for 1px horizontal margin
    gallery = $('#gallery'), // cache a reference to our container
    imagelist = gallery.children(); // cache a reference to our image list


function layoutImages(){
    var columncount = parseInt(gallery.width()/fixedwidth,10),  // find how many columns fit in container
        columns = [];

    for (var i =0;i<columncount;i++){ // initialize columns (0 height for each)
        columns.push(0);
    }

    imagelist.each(function(i,image){
         var min = Math.min.apply(null, columns), // find height of shortest column
             index = columns.indexOf(min), // find column number with the min height
             x = index*fixedwidth; // calculate horizontal position of current image based on column it belongs

        columns[index] += image.height +1; //calculate new height of column (+1 for 1px vertical margin)
        $(image).css({left:x, top:min}).delay(i*200).animate({opacity:1},100); // assign new position to image and show it
    });
}

$(window).resize(layoutImages).trigger('resize');

Demo at http://jsfiddle.net/gaby/DL8Vr/6/

---

Assumptions

• 50 pixels fixed width for each image (parameterized by the fixedwidth variable)
• all images are in a common container (with id gallery in this case)

The demo has some CSS animations, and also repositions the images when the window is resized..

Demo html

<div id="gallery">
    <img src="http://dummyimage.com/50x42/7c6c4c/000000.gif&amp;text=img0">
    <img src="http://dummyimage.com/50x89/2c6c2c/000000.gif&amp;text=img1">
    ....
    <img src="http://dummyimage.com/50x62/2c5c6c/000000.gif&amp;text=img29">
    <img src="http://dummyimage.com/50x58/2c3c9c/000000.gif&amp;text=img30">
</div>

Demo css

#gallery{
    position:relative;
    width:100%;
}
#gallery img{
    position:absolute;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    transition:all 1s;
    opacity:0;
}