文章地址 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. Eclipse Git插件切换分支的时候不要Reset

    今天做了一件蠢事,我在当前分支上改了很多代码,后来切换分支的时候,有一个文件有冲突,eclipse提示这个文件冲突,我可以选择commit/stash/reset,我一看这个文件没什么关系,不需要提交 ...

  2. HTML 5+ SDK 更新日志

    http://ask.dcloud.net.cn/article/103 离线打包 SDK App 最新Andorid平台SDK下载新版本Android SDK使用aar方式发布,部分资源和jar包整 ...

  3. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  4. Leetcode914.X of a Kind in a Deck of Cards卡牌分组

    给定一副牌,每张牌上都写着一个整数. 此时,你需要选定一个数字 X,使我们可以将整副牌按下述规则分成 1 组或更多组: 每组都有 X 张牌. 组内所有的牌上都写着相同的整数. 仅当你可选的 X > ...

  5. CentOS 上MySQL报错Can't connect to local Mysql server through socket '/tmp/mysql.scok' (111)

    好吧,这是最常见的MySQL服务没有打开 那就赶紧去打开啊! 在管理员模式下运行以下语句: /usr/local/mysql/bin/mysqld_safe --user=mysql & 成功 ...

  6. docker无法删除镜像，Error: No such container，附docker常用命令

    最近打算删除掉docker镜像但是发现有几个镜像就是删除不了,加了-f强制删除也不行,一直报Error: No such container的错误,最后终于找到了办法直接删除文件,步骤如下: 切换到r ...

  7. c++之手写strcmp

    int strcmp(const char* str1, const char*str2){ assert(str1 != NULL&&str2 != NULL); while (*s ...

  8. UIScrollView 实践经验

    UIScrollView(包括它的子类 UITableView 和 UICollectionView)是 iOS 开发中最常用也是最有意思的 UI 组件,大部分 App 的核心界面都是基于三者之一或三 ...

  9. LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number

    数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...

  10. 集合--Collection接口详解&&迭代器

    /* * 集合的顶层接口--Collection接口 * 添加 * add() * addAll() * * 遍历集合 * iterator() 迭代器 * * 删除 * remove() * rem ...