文章地址 https://www.cnblogs.com/sandraryan/

瀑布流：瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部（百度百科）

我的理解是：按照行布局，每行先添加一个元素，第二行元素从最矮的一行开始添加~~

图片大概是这样子~~

（随机生成颜色，真的辣眼睛。。）

所以这个案例： js插入代码。随机生成高度和颜色。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    ul, li {

        list-style: none;

        box-sizing: border-box;

    }

    ul {

        width: 600px;

        border: 5px solid silver;

        border-radius: 8px;

        margin: 0 auto;

        padding: 15px;

        display: flex;

    }

    li {

        width: 200px;height: 300px;

        background-color: rgb(0, 162, 255);

        padding: 10px;

    }

    li>div {

        text-align: center;

        font-size: 50px;

        color: white;

    }

    </style>

</head>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <script>

    // 获取元素

    var list = document.querySelectorAll("ul li");

    // 创建数组，代表三列高度，每天添加一个元素，更新一次数组的值，一行添加三个div

    // ha和li形成一一对应关系

    var ha = [0,0,0];

    // 产生两个数之间的随机数

    function rn(x,y){

        return Math.round(Math.random()*(y-x)+x);

    }

    // 使用循环创建元素，添加到对应li

    for(var i = 0 ; i < 10 ; i++){

        // 创建元素

        var el = document.createElement("div");

        // 随机元素高度

        var h = rn(100,200);

        // 随机元素背景色

        var bg = "#" + (Math.random()+"").substr(2,6);

        // 生成元素添加高度，背景色

        el.style.height = h + "px";

        el.style.backgroundColor = bg;

        // 设置元素内容

        el.innerHTML = i;

        el.style.lineHeight = h + "px";

        // 找到最矮的一列

        var min = Math.min(ha[0],ha[1],ha[2]);

        var minIndex = ha.indexOf(min);

        //将当前元素添加该列，ha的数组对应下标的元素要及时更新

        list[minIndex].appendChild(el);

        ha[minIndex] += h;

    }

    </script>

</body>

</html>

end~~

原生js实现最简单的瀑布流布局的更多相关文章

  1. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  2. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  3. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  4. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  5. 原生JS实现一个简单的前端路由（原理）

    说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...

  6. 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...

  7. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  8. 原生js制作播放器

    以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器  也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery  我也做不出来. 以前也用过a ...

  9. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

随机推荐

  1. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  2. Ubuntu下安装go语言

    参考:http://golang.org/doc/install/source 1. 下载go源代码 sudo apt-get install mercurial hg clone -u releas ...

  3. update批量更新某一列成其它列对应的值【原】

    update批量更新某一列成其它列对应的值 postgresql 标准sql语句 update AA set name = BB.name , AA.sex = BB.sex from BB wher ...

  4. MySQL安装后设置root 密码

    Mysql安装完成后初始化root 密码为空,直接回车 使用命令行: mysqladmin -u root password "123456" 来设置root密码.这里我设置的密码 ...

  5. git安装方法

    点击 http://git-scm.com/download 选择你使用的操作系统,如果是linux就可以看到命令行,windows则是下载客户端

  6. 使用vscode书写markdown文件

    插件推荐 markdown-preview-enhanced 打开 vscode 编辑器,在插件页搜索 markdown-preview-enhanced,接着点击 Install 按钮. 该插件的中 ...

  7. Leetcode724.Find Pivot Index寻找数组的中心索引

    给定一个整数类型的数组 nums,请编写一个能够返回数组"中心索引"的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和. 如果数组不 ...

  8. 使用Velero Restic快速完成云原生应用迁移至ACK集群

    本文记录使用Velero Restic快速完成云原生应用迁移至ACK集群的实践过程. 0. 实践步骤概览 (1)创建GKE集群(或自建Kubernetes集群)(2)在GKE集群上部署示例应用Jenk ...

  9. openstack安装dashboard后访问horizon出错 500 or 504

    访问controller/horizon出错500:internal server error 访问controller/horizon出错504:internal server error  gat ...

  10. shell脚本批量杀死进程

    使用Ubuntu系统时常会遇到机器卡死的情况(人生最大的痛苦),所有的键都没有用,只好强制关机,我似乎对此已经'乐此不疲了'. 看到又神牛说: 可以在tty里面把相关的进程杀死,之后就正常.(到目前我 ...