操作多列内容的响应式设计

Question

我想根据屏幕/设备宽度实现具有 1 或 2 列的 UI。我正在使用 Ajax 将数据加载到这两列中并根据这些项目高度附加它，因此两列大约需要。相同数量的垂直空间。

如果用户始终保持其浏览器窗口大小相同，一切正常，因为初始加载将填充 1 或 2 列。但是当用户调整窗口大小时，问题就出现了，我必须相应地整合所有内容：

• 较小的尺寸会隐藏第 2 列，并且它的所有项目都应以正确的顺序插入到第 1 列中
• 较大的尺寸会显示两列，并从第 1 列获取一些内容并将其放入第 2 列

我可以使用 Javascript 来执行此操作，但我想知道是否可以仅以 CSS 方式执行此操作？

Google+ 就是一个例子，它可以根据内容宽度使用 1..3 列。

Answer 1

我想出了自己的解决方案

仅使用 CSS 是可能的，但可能不可行

在资源消耗方面是可行的。在页面上添加项目时，请始终将所有项放在第 1 列中，为那些您也位于第 2 列中的项目添加一个额外的 CSS 类。

响应式媒体查询将：

1. 隐藏第 2 列并在第 1 列中显示这些附加项（基于 CSS 类）。
2. 显示第 2 列并在第 1 列中隐藏具有适当 CSS 类的项目

这是在用户调整浏览器窗口大小时避免 Javascript 处理的唯一方法。

问题

此功能的唯一问题是当您显示大量项目时，因为您的 DOM 将平均多出 50% 的节点，因为这些项目中大约有一半将在整个页面中重复（即使这些项目只有一个副本）将一次显示重复项）。