文章地址 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. bzoj 3598 [Scoi2014]方伯伯的商场之旅——数位dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3598 TJ:https://www.cnblogs.com/Zinn/p/9351218.h ...

  2. Eclipse Git插件切换分支的时候不要Reset

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

  3. web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理

    1.Javascript函数-了解函数的用途 1.1.函数: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 2.Javascript函数-定义函数 2.1.function必须小写 3. ...

  4. 【风马一族_php】NO5_php基础知识_数组

    原文来自:http://www.cnblogs.com/sows/p/6032570.html (博客园的)风马一族 侵犯版本,后果自负 回顾 匿名函数 定义: 变量 = function [参数列表 ...

  5. 24种编程语言的Hello World程序

    24种编程语言的Hello World程序 这篇文章主要介绍了 24 种编程语言的 Hello World 程序,包括熟知的 Java.C 语言.C++.C#.Ruby.Python.PHP 等编程语 ...

  6. 友盟iOS sdk整理

    文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...

  7. 2019-7-22-WPF-如何判断两个-LinearGradientBrush-相等

    title author date CreateTime categories WPF 如何判断两个 LinearGradientBrush 相等 lindexi 2019-07-22 21:26:2 ...

  8. shell脚本批量杀死进程

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

  9. AtCoder Regular Contest 084 C - Snuke Festival【二分】

    C - Snuke Festival ....最后想到了,可是不应该枚举a[],这样要二重循环,而应该枚举b[],这样只需一重循环... #include<iostream> #inclu ...

  10. DRP 2016-06-30 16:36 314人阅读 评论(21) 收藏

    学习drp有一段时间了,其实从很久以前,再提高班的学习就已经不是单纯的学习,学习总是伴随着项目.这就使得我们的学习不可能全天的,大把大把时间的学习只出现在第一和第二年,所以,各自珍惜吧. DRP(Di ...