javascript - 如何让这些 html 元素正确定位和交错？

Question

我的网页包含一组平铺元素作为背景。在其上方，我有另一组图 block (两倍大)作为覆盖层。这些较大的图 block 中的每一个的“右边距”等于较小的背景图 block 之一的大小。您可以看到这样的示例@http://jsfiddle.net/dhx2r/2/ *更新

乍一看，这显示正确。问题是，由于每个较大的图 block 都有这个右边距，这意味着如果您扩展窗口，图 block 将不会向上滑动以填充间隙，除非它的宽度大于 3 个小图 block 。 (像这样:http://img444.imageshack.us/img444/1412/70953496.png)

理想情况下，当 3 个小图 block 的间隙可用时，我会以某种方式附加到 window.resize 事件并将“margin-right”设置为“0”。我尝试使用 jsfiddle 的 js 面板中的代码执行此操作，但它没有给出正确的结果。由于我使用的代码依赖于“window.resize”事件，因此 jsfiddle 不会演示实际发生的情况，但它至少显示了我正在使用的代码。

今天我已经在这个问题上苦苦挣扎了约 7 个小时，所以我的头脑有点困惑!解决这个最初的问题后，我的意图是以某种方式错开奇数行，使它们具有小瓷砖宽度的“左边距”，以产生这种效果:http://img507.imageshack.us/img507/3600/57663338.png

我设法使用以下方法计算偶数/奇数行(假设小图 block 为 150px，大图 block 为 300px):

if ((pos != 0) && (pos % 600 != 0)) {
    // The row is even, stagger the tiles.
}
else {
    // The row is odd, do nothing.
}

..但是我从未解决这个最初的问题来研究逻辑。

无论如何，如果有人有关于如何让这个工作的解决方案，我将非常感激!我感觉自己浪费了一整天的时间去撞墙。

谢谢:-)

Answer 1

我有一个解决方案的开始，但有时颜色设置不正确。我正在寻找解决方案。

Fiddle 1

终于所有问题都解决了here .

谢谢你，找到解决方案对我来说很有趣。我希望这个解决方案对您有好处。