html and js rectangle resizing issue

Question

I am developing a photo collage just like this one [1]: http://www.fotor.com/features/collage.html but i am making it using javascript and html the issue right now i am facing is that i want to resize the rectangle dynamically. Dynamically i mean if i resize any of the rectangle the others will get resize as well so can any one help or suggest me any solution ? or any lib of js ? or if anyone have done can share it ?

if (newSide != UNKNOWN) {
    if (ndiv.resize(newSide, deltaX, deltaY)); { //
        this.resizeNeighbours(newSide, ndiv, deltaX, deltaY);
        calls.push({
            d: ndiv,
            n: newSide,
            dx: deltaX,
            dy: deltaY
        });
    }
} //end if new side unknown 
} //end 
for
for (i = 0; i < calls.length; i++) {
    c = calls[i];
    this.autoSizeDivs(c.n, c.d, c.dx, c.dy, dep + 1);
}
} catch (e) {
    console.log(e);
}
return true;
}

Answer 1

Look at this fiddle: http://jsfiddle.net/f8DY8/28/ and take a look at this post: Expand a div to take the remaining width

<style>
.rec{
    border:1px solid #249fea;
    margin:3px;
}
.container
{
    width:300px;
    height:300px;
    border:1px solid #ccc;
}
</style>


<button id="changeWidthBtn">Change Width</button><br/>

<div class="container">
    <div style="float:left;width:100px;height:200px;" class="rec" id="one">one</div>
    <div style="overflow:hidden;height:50px;" class="rec">two</div>
    <div class="rec" style="overflow:hidden;height:150px;">three</div>
</div>


<script>
$("#changeWidthBtn").click(function(){
    $("#one").width("200px");
});
</script>

Answer 2

You can give each row a CSS class then, with the help of jQuery, get all images in the row using a CSS selector. You then call your resize function on each selected DOM element.