Left floated li elements based on absolute positioning

by lovromar

HTML

<div class="modules">
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</div>

CSS

.modules {
 position: relative;
 width: 100%;  
}

.module {
 width: 250px; /* I put this so you can see it better  */
 background-color: red;
 margin: 5px;
 position: absolute;
}

JavaScript

//Generate random height for each module, normally this doesn't need to be done because
//they have various amounts of contents in a real app.
$(".module").each(function(i) {
    var height = (150 + (Math.random() * 100 | 0));
    this.style.height = height + "px";
});


$(window).bind("orientationchange resize", function(e) {
    var modules = $(".module"),
        columnWidth = modules[0].offsetWidth,
        margin = 10,
        parentWidth = $(".modules").width(),
        fits = Math.floor(parentWidth / (columnWidth + margin * 2)),
        columnHeights = {},
        i;

    for (i = 0; i < fits; ++i) {
        columnHeights[i] = 0;
    }

    function getTop(i) {
        var nColumn = i % fits;
        return columnHeights[nColumn];
    }

    modules.each(function(i) {
        var height = this.offsetHeight, //Now I am just retrieving the height
            nColumn = i % fits;

        this.style.left = ((columnWidth + margin) * nColumn) + "px";
        this.style.top = getTop(i) + "px";
        columnHeights[nColumn] += (height + margin);
    });

}).trigger("resize");