随着宽度的增加自动增加列数

Question

是否有人知道随着屏幕宽度的增加/减少而在不断变化的列数中显示输入的好方法？比如说，我有 15 个人。如果你的屏幕是 1200 像素宽，我想给你 15 个人，分成 3 列，每列 5 人。如果您的屏幕宽度在 800 到 1200 像素之间，那么我想给您 7 列和 8 列的 2 列，以及任何小于 800 像素的列，我只会给您一个包含 15 个人的列表。

我正在寻找 jQuery 或 angularJS 解决方案。

Answer 1

可以将 CSS3 columns 属性与媒体查询结合使用来更改它们

Answer 2

我一般不会用 angularjs 或 javascript 来做这件事，因为监听 resize-event 的成本很高。为什么不使用 css-media 查询？

@media(min-width: 1200px){
   td:nth-child(13+n){
     display: none;
   } 
   tr:nth-child(4+n){
     display: none;
   } 
}
@media(min-width: 800ox){
   td:nth-child(8+n){
     display: none;
   } 
   tr:nth-child(3+n){
     display: none;
   } 
}

如果你真的想，你可以使用这样的东西： http://jsfiddle.net/GpLHZ/

虽然链接到处理数据的特定控制器的指令或表的指令可能是更好的方法。