使用CSS的响应式曲折布局？

Question

我想创建一个响应式蛇/之字形布局，如下所示： 它是一个方形图像和圆圈的路径，从容器的中心开始向下。

元素数量未知，由服务器数据决定。

如何使用纯CSS实现此目的？

这是一个可能的代码：

<div class="container">
  <div class="square"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="square"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="square"></div>
/<div>

Full Codepen

Answer 1

我制定了一个非常复杂的黑客（codepen）。但是你真的不希望这个在生产中。它也只适用于三个“跳跃”（即元素流从左到右，反弹，回到左边，再次反弹并进入永恒的空隙，永远不会被再次看到）。

黑客的工作方式如下：首先，我们计算左边的位置，我们需要将元素移动到每个可能的“跳”。对于第一跳，它是$i * 50px（$i是基于0的元素索引），对于第二跳它是100vw - ($i * 50px - 100vw) == 200vw - $i * 50px（100vw是窗口宽度; $i * 50px - 100vw是元素相对于右侧屏幕边框的位置），第三个是$i * 50px - 200vw。

我们现在需要计算max(min($first, $second), $third)。不幸的是，CSS calc()函数不允许这样做，所以我们在图中放置一个特殊元素：

.spacer {
  display: inline-block;
  max-width: 50px; /* first */
  min-width: 500px; /* third */
}

.spacer > span {
  display: inline-block;
  max-width: 300px; /* second */
  width: 10000px;
}

（您可以在单独的codepen中使用此间隔符。）

同样，这是一个非常复杂和缓慢的解决方案，所以你现在最好坚持使用JavaScript（除非有人发明了一些更聪明的CSS实际工作的东西）。