Arranging Images Randomly In Order

I have a list of images with various sizes and I have to show them all in a page. I want to arrange them in such a way that no white spaces are shown between images on oneline and

Solution 1:

If you're willing to have the images overlap each other you can have minimum gap between them using client side code to position the items dynamically:

window.onload = function() {
    var oList = document.getElementById("liParent")
    var arrItems = oList.getElementsByTagName("li");
    var totalWidth = parseInt(oList.style.width, 10);
    var curLeft = 0;
    var curTop = 0;
    var arrHeights = newArray();
    var colIndex = 0;
    for (var i = 0; i < arrItems.length; i++) {
        var oCurItem = arrItems[i];
        var oImage = oCurItem.getElementsByTagName("img")[0];
        oCurItem.style.position = "absolute";
        var curWidth = oImage.offsetWidth;
        var curHeight = oImage.offsetHeight;
        if (curLeft + curWidth > totalWidth) {
            curLeft = 0;
            colIndex = 0;
        }
        if (colIndex < arrHeights.length)
            curTop = arrHeights[colIndex];
        oCurItem.style.left = curLeft + "px";
        oCurItem.style.top = curTop + "px";
        arrHeights[colIndex] = (curHeight + curTop);
        curLeft += curWidth;
        colIndex++;
    }
}

Updated jsFiddle: http://jsfiddle.net/zHxPT/2/

Solution 2:

Have you looked into jquery?

With CSS you could set the margin and padding of the elements to 0. Then use javascript as an array, get a random number and write that index to the page.

Solution 3:

Load the images (in a hidden div if needed) then find the tallest and give all the images the same height. That way there will be no gap to the next row (and then show the div)

For example