2

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

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;
}
4

2 回答 2

0

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

于 2013-08-26T14:15:47.020 回答
0

看看这个小提琴： 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>
于 2013-08-26T14:15:43.053 回答