基于CSS实现每列四行加载完一列后数据自动填充到下一列
只用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结构代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>test</title>
- </head>
- <body>
- <ul></ul>
- </body>
- </html>
2) js代码(注:此处的js只是用于生成数据)
- <script type="text/javascript">
- window.onload = function() {
- var oul = document.getElementsByTagName('ul')[0];
- for(var i=0; i<9; i++){
- var _li = document.createElement('li');
- _li.innerText = i+1;
- oul.appendChild(_li);
- }
- };
- </script>
3) css代码(关键部分)
- <style type="text/css">
- ul{
- margin:0px;
- padding:0px;
- height:200px;
- width: 100px;
- text-align: center;
- -moz-column-gap: 12px;
- -moz-column-count: 1;
- -moz-column-rule: 1px solid #d8d8d8;
- -webkit-column-gap: 12px;
- -webkit-column-count: 1;
- -webkit-column-rule: 1px solid #d8d8d8;
- column-gap: 12px;
- column-count: 1;
- column-rule: 1px solid #d8d8d8;
- }
- ul li{
- height: 50px;
- line-height: 50px;
- }
- </style>
以上代码最重要的就是css代码部分的实现,这即实现了题目的要求,主要属性为ul中的height、width、column相关以及li的height属性。
column-count代表分列数,column-gap表示分列之间的间隙,column-rule则表示列之间的分割线;
此处设置ul高为200px,每个li高50px,这样就是当列满4个时,分到第二列。
显示结果如图所示:
以上所述是小编给大家介绍的基于CSS实现每列四行加载完一列后数据自动填充到下一列,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
CSS3 Text Stroke(文本描边)和text-fill-color(文本填充色)调试工具
这是一款可在线调试并预览CSS3 Text Stroke(文本描边)和text-fill-color(文本填充色)效果的工具。右侧具有实时调试并显示预览效果的功能,同时能够实时生成对应的css3效果2016-05-31CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)
CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)是一款共有13种动画填充背景效果,均由按钮的伪元素和CSS3 animation来制作完成,效果非常棒,喜欢的朋友前来2016-04-12- 这篇文章主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下2016-03-07
- 想实现这样的一个效果两个div左边的宽度固定、右边的自动填满,实现方法很简单,下面为大家简单介绍下,感兴趣的朋友可以参考下2013-08-18
- 但是css3出现以后,这个重复显示的情况被改善了。background-size 属性可以让我们之前的让背景图片拉伸填充的希望成真,具体使用方法如下感兴趣的朋友可以参考下哈,希望对2013-07-11
CSS教程:盒模型(BOX Model)-CSS教程-网页制作-网页教学网
如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding2008-10-17
最新评论