您现在的位置是：网站首页> 编程资料编程资料

基于CSS实现每列四行加载完一列后数据自动填充到下一列CSS3 Text Stroke(文本描边)和text-fill-color(文本填充色)调试工具CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)简单掌握CSS3将文字描边及填充文字颜色的方法两个div左边的固定宽度右边的自动填充的csscss 如何让背景图片拉伸填充避免重复显示CSS教程:盒模型(BOX Model)-CSS教程-网页制作-网页教学网

2021-09-05 976人已围观

简介 本文是小编给大家分享的基于基于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结构代码:

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4. test   
  5.   
  6.   
    7.   
    •   
    •   

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

    CSS Code复制内容到剪贴板
    1. "text/javascript">   
    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. "text/css">   
    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实现每列四行加载完一列后数据自动填充到下一列，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

    上一篇：CSS颜色体系学习小结(推荐)CSS3中各种颜色属性的使用教程CSS实现大小相同、颜色深浅不一的粒子旋转加载动画CSS3中currentColor关键字的妙用使用CSS3的::selection改变选中文本颜色的方法css实现兼容火狐、IE的LI奇偶行颜色交替方法CSS中对RGB颜色的使用详解CSS3中颜色线性渐变实战使用CSS3的背景渐变Text Gradient 创建文字颜色渐变可自定义进度条颜色的CSS3动画进度条源码采用CSS3实现的表面颜色可渐变3D立方体动画特效源码

    下一篇：CSS的box-align属性控制子元素布局实例解析CSS的box model盒模型及其内的子元素布局控制使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题实例讲解CSS3中的box-flex弹性盒属性布局CSS3中box-shadow的用法介绍CSS3属性box-shadow使用指南CSS3属性box-sizing使用指南css3设置box-pack和box-align让div里面的元素垂直居中

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网