0

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

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

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

我可以使用 Javascript 来执行此操作,但我想知道是否可以仅以 CSS 方式执行相同操作?

这方面的一个例子是 Google+,它可以根据内容宽度使用 1..3 列。

4

1 回答 1

0

我想出了我自己的解决方案

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

在资源消耗方面是可行的。在页面上添加项目时,请始终将它们全部放在第1 列中,为那些您也放置在第 2 列中的项目添加一个额外的 CSS 类。

然后,响应式媒体查询将:

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

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

问题

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

于 2014-01-24T12:35:51.100 回答