如何用JavaScript划分一个LI's列表?

How do I divide a list of LI's with JavaScript?

本文关键字：LI 列表 一个 JavaScript 何用 划分      更新时间：2023-09-26

假设我的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中编写一些方法会更好吗?

谢谢你的建议

你可能应该使用CSS来解决这个问题。设置li为左浮动，它们会适应可用的空间

仅使用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%;
    }
}

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

你可以用CSS很容易地做到这一点，设置所有的元素为显示:内联;把它们都放在一个基于百分比的宽度(或者只是使用整个宽度)

相关文章：