Question

我正在开发像这样的照片拼贴[1]：http://www.fotor.com/features/collage.html但是我正在使用javascript和html制作它现在我面临的问题是我想动态调整矩形的大小。动态地，我的意思是，如果我调整任何矩形，其他人将调整大小也可以任何人帮助或建议我任何解决方案？或任何js的lib？或者如果有人做过可以分享吗？

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

看看这个小提琴：http://jsfiddle.net/f8DY8/28/ 并看一下这篇文章：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

您可以为每一行提供一个CSS类，然后在jQuery的帮助下，使用CSS选择器获取行中的所有图像。然后，在每个选定的DOM元素上调用resize函数。

html和js矩形调整大小问题

2 个答案: