如何使用JavaScript划分LI列表？

Question

假设我的Rails 3应用程序返回一个li标记列表。想象一下图片库，其中每个li标记都包含一个小图像。

我想要做的是确定屏幕的宽度，然后在移动到下一行之前只显示5-7个图像。

例如，假设我有一个可能的宽屏显示器：

IMG1 IMG2 IMG3 IMG4 IMG5 IMG6 IMG7
IMG8 IMG9 ...

但在较小的显示器上，我希望：

IMG1 IMG2 IMG3 IMG4 IMG5
IMG6 IMG7 IMG8 IMG9 ...

也许JavaScript不是做这件事的最佳方式。用Rails编写一些方法是不是更好？

谢谢你的建议。

Answer 1

你可能应该使用CSS来解决这个问题。使LIs浮动:向左，它们将适应可用的空间。

Answer 2

只使用CSS，您可以将<li>元素设置为display: inline，然后使用相对宽度(百分比)使它们填充空间。要更改每行元素的数量，@media查询将有所帮助：

li {
    display: inline;
}

@media (max-width: 400px) {
    li {
        width : 33%;  /* three per line */
    }
}
@media (max-width: 600px) {
    li {
        width : 25%; /* 4 */
    }
}
@media (min-width: 1000px) {
    li { 
        width : 20%;
    }
}

还会有其他样式需要重置才能完全正确地工作(删除填充等)，但这可能是一个好的开始。

Answer 3

你可以用CSS很容易地做到这一点，将所有的元素设置为display:inline；将它们都放在一个基于百分比的宽度中(或者只使用整个宽度)