CSS怎么实现每列四行加载完一列后数据自动填充到下一列

这篇文章主要介绍“CSS怎么实现每列四行加载完一列后数据自动填充到下一列”，在日常操作中，相信很多人在CSS怎么实现每列四行加载完一列后数据自动填充到下一列问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么实现每列四行加载完一列后数据自动填充到下一列”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司是专业的乐至网站建设公司，乐至接单;提供成都网站制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行乐至网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果。这个题目用图表示如下：

如果将题目换成“只用css实现每行四列，加载完一行后数据自动填充到下一行”，那这个问题就简单多了，相信大家都能使用多种方法实现。但现在这个问题该怎么去解决呢。

对了这个题目，似乎不是那么好解决，毕竟像这类问题我们都是使用js或者模版辅助实现的。

这个题目难点在哪儿？

对动态添加的数据只用css实现这个效果，那就意味着除了动态添加数据外，不可能改变现有的文档结构。什么意思呢？比如对于这种实现，我们可以使用ul>li结构，但除了增加li（相当于添加数据层）外，不可能在原文档中添加一个ul或者其他的html标签。

这个问题也就变成了对于同一个ul下的li如何设置它们的不同的属性，使其在第五个以后“浮到”另一列？（注：此处是笔者所用的结构，大家可以采用其他结构进行）

问题分析到这儿，我的第一反应是用nth-child这个属性，对li:nth-child(5)、li:nth-child(6)、li:nth-child(7)...分别设置定位属性，这样在增加第五个、第六个、第七个数据时就可将其显示到对应的位置了。但这样对于动态添加的数据这样写是不合适的，毕竟我们不知道有多少条数据，而且定位时也需要计算当前li需要的left、top值。（大家有兴趣可以使用scss等拓展下这个思路）

解决方法：

在这里我想介绍另一种实现方法，使用css3的column分列相关属性（此中方法在ie11才有支持，其他浏览器需要加对应的浏览器前缀）；

先贴出我的相关代码：

1) html结构代码:

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.   

5.   

6.   

7.   

8.   

9.   

2) js代码（注：此处的js只是用于生成数据）

CSS Code复制内容到剪贴板

1.   

2.     window.onload = function() {   

3.         var oul = document.getElementsByTagName('ul')[0];   

4.         for(var i=0; i<9; i++){   

5.             var _li = document.createElement('li');   

6.             _li.innerText = i+1;   

7.             oul.appendChild(_li);   

8.         }   

9.     };   

10.   

3) css代码(关键部分)

CSS Code复制内容到剪贴板

1.   

2. ul{   

3.     margin:0px;   

4.     padding:0px;   

5.     height:200px;   

6.     width: 100px;   

7.     text-align: center;   

8.     -moz-column-gap: 12px;   

9.     -moz-column-count: 1;   

10.     -moz-column-rule: 1px solid #d8d8d8;   

11.     -webkit-column-gap: 12px;   

12.     -webkit-column-count: 1;   

13.     -webkit-column-rule: 1px solid #d8d8d8;   

14.     column-gap: 12px;   

15.     column-count: 1;   

16.     column-rule: 1px solid #d8d8d8;   

17.  }   

18. ul li{   

19.     height: 50px;   

20.     line-height: 50px;   

21.  }   

22.   

以上代码最重要的就是css代码部分的实现，这即实现了题目的要求，主要属性为ul中的height、width、column相关以及li的height属性。

column-count代表分列数，column-gap表示分列之间的间隙，column-rule则表示列之间的分割线；

此处设置ul高为200px，每个li高50px，这样就是当列满4个时，分到第二列。

显示结果如图所示：

到此，关于“CSS怎么实现每列四行加载完一列后数据自动填充到下一列”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！