javascript - 使用 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

我已经解决了一个极其复杂的 hack ( codepen )。不过，您真的不希望在生产中使用它。它也只适用于三个“跳跃”(即元素流从左到右，反弹，返回到左侧，再次反弹并进入永恒的空虚，再也不会被看到)。

hack 的工作原理如下:首先，对于每个可能的“跳跃”，我们从左侧开始计算我们需要将元素移动到的位置。对于第一跳，它是 $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 的东西，而且实际上可以工作)。