PHP CSS HTML。海量数据、动态列和框

Question

我有大量要显示的数据列表，有 10,000 个，希望过滤器一次只有几千个。

语言:HTML、PHP、CSS

我在考虑显示这些数据的最佳方式，并想到了一个我喜欢的想法。我想要一个固定高度(屏幕/浏览器分辨率的 90% 或 100%)的框(比如一个 div)。没有水平滚动。数据将以列的形式直观显示，填充第一列，然后是第二列、第三列、第四列，等等……根据需要填满。这些框将容纳列并根据需要向下增加数量(用于垂直滚动)。这需要是动态的，因为我不知道将显示什么数据(基于过滤器)，我不知道用户浏览器的大小等。

如果有更多帮助，请制作绘画图像: http://postimage.org/image/630pxp3sx/

如果盒子的东西是不可能的，你能至少告诉我如何实现柱状效果吗。

希望这是有道理的。理想情况下，我想我想用 CSS 实现这一点？

谢谢

Answer 1

与纯 CSS 最接近的是 columns 属性，但它不会完全按照您想要的方式填充。元素将从上到下、从左到右填充并平均分配，以便所有列尽可能接近相同的高度。

ul {
  columns: 5em; /* some browsers require prefixes (eg. -moz-columns, etc.) */
}

http://jsfiddle.net/VQXH3/

Flexbox 可以满足您的要求，但目前对它的支持很差(IE10+、Opera、Chrome；Firefox 即将添加对新规范的支持)。

http://jsfiddle.net/VQXH3/1/ (在 Opera 中尝试，没有给 demo 添加前缀)