html li 做瀑布流,js实现瀑布流效果(自动生成新的内容)

当滚动条接近底部会自动生成新的内容(色块)

效果图:

c31fe8bab999bb9351334b0a467aba62.png

代码如下:

Title

*{list-style: none;}

div{overflow: hidden;}

ul{float: left;}

li{width:300px; margin-bottom:10px;}

function rnd(n,m){

return parseInt(Math.random()*(m-n))+n;

}

function cl(){

var li = document.createElement('li');

li.style.height=rnd(100,500)+'px';

li.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';

return li;

}

window.οnlοad=function(){

var aUl = document.getElementsByTagName('ul');

//alert(aUl.length);

function c20(){

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

var arr =[];

for(var j=0;j

arr.push(aUl[j])

}

arr.sort(function(n,m){

return n.offsetHeight- m.offsetHeight

});

arr[0].appendChild(cl());

}

}

c20();

window.οnscrοll=function(){

var arr = [];

for (var j = 0; j < aUl.length; j++) {

arr.push(aUl[j])

}

arr.sort(function (n, m) {

return n.offsetHeight - m.offsetHeight

});

var n = (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight;

if (n > arr[0].offsetHeight) {

c20()

}

}

}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302022.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jquery实现多行滚动效果

2019独角兽企业重金招聘Python工程师标准>>> 有时jquery博客想&#xff0c;整那么多demo有什么用呢&#xff1f; 有些前端新手朋友不会&#xff0c;为他们服务吧。还有喜欢自己留点字迹&#xff0c;也好方便自己回过头看看。 温故而知新嘛。 前端需要那么多js特效&a…

.NET 搭建简单的通知服务

搭建简单的通知服务Intro很多情况下&#xff0c;我们都会遇到一些需要进行通知报警的场景&#xff0c;比如说服务器资源监控报警&#xff0c;抢到火车票后通知用户进行付款。原来主要是用的钉钉群里的机器人来做的通知&#xff0c;周末看到原来做 【Server 酱】的大佬写了一个简…

c#程序设计教程 唐大仕pdf_C# 添加PDF水印

概述一般我们在向文档添加水印时&#xff0c;会分为直接添加文字水印和加载图片添加图片水印两种情况。常见的&#xff0c;在添加文字水印时会多以声明文档版权、权威性的文字、标语或者名称等&#xff1b;同样的&#xff0c;图片水印也通常可以是某组织的LOGO、印章、或者其他…

电脑病毒竟然被程序员当宠物养!网友:这些都是我逝去的青春

全世界只有3.14 % 的人关注了数据与算法之美起电脑病毒&#xff0c;大家第一时间应该是想到的熊猫烧香&#xff0c;木马等等吧。很多电脑病毒破坏力惊人&#xff0c;熊猫烧香在当年也是让全国人民都陷入一种恐慌状态。但对于我们程序员来说&#xff0c;看过的病毒跟吃的米一样多…

.NET5 WPF进阶教程

↑↑↑ 点击左上角蓝字关注我&#xff0c;为您提供技术新动态。本期内容一、概要本系列将继《.net wpf快速入门教程》带领大家了解wpf&#xff0c;帮助各位在初级向中级过渡的中掌握基本该具备的能力。本系列视频长度大约在15分钟到30分钟左右&#xff0c;视频内容不仅仅会讲解…

python二维列表写入excel_用Python实现合并excel列表

python操作excel主要用到xlrd和xlwt这两个库&#xff0c;即xlrd是读excel&#xff0c;xlwt是写excel的库。安装xlrd模块&#xff0c;在安装好python的环境下&#xff0c;打开cmd&#xff0c;输入pip install xlrd 回车。安装好后&#xff0c;再输入pip install xlrd回车&#x…

C语言入门经典材料领走不谢!

小天从大学开始&#xff0c;便开启资料收集功能。近几年以大数据的飞速发展&#xff0c;计算机科技进入新的发展阶段&#xff0c;再加上日常的深入研究&#xff0c;小天收集整理了丰富的C语言资料&#xff0c;内容涵盖“入门经典”&#xff0c;“考试必备材料”等。截止到今天&…

vue html引入图片,vue引入图片的几种方式

情况1&#xff1a;图片在/public目录下把图片放到与index.html同级的目录下情况1-1.png方式1因为vue编译后会生成index.html&#xff0c;所以我们将图片与index.html放在同一目录下&#xff0c;相当于在index.html中使用引入图片情况2&#xff1a;图片在/src/assets目录下把图片…

WPF 分页控件的简单实现

想做个分页控件&#xff0c;想了想逻辑实现太复杂了&#xff0c;这不&#xff0c;用奇怪的方式实现了它&#xff0c;就如这张图一样。。。看看效果&#xff1a;下面就直接粘代码喽&#xff1a;新建一个Pagination类&#xff1a;using System; using System.Collections.Generic…

两向量点乘坐标运算_高三数学冲刺复习之向量小题的题型总结(含好用的补充公式)...

高考中&#xff0c;向量小题常从以下几个方面来考查&#xff1a;1、平面向量的有关概念与平面向量的线性运算&#xff0c;主要考查向量的加法、减法运算&#xff0c;考查向量的数乘运算及其几何意义。2、考查平面向量的坐标&#xff1a;主要考查平面向量基本定理及其意义&#…

全球最厉害的14位程序员!

全世界只有3.14 % 的人关注了数据与算法之美导读&#xff1a;全球最厉害的14位程序员是谁&#xff1f;一起来看下让我们膜拜的这些大神都有哪些&#xff1f;&#xff08;排名不分先后&#xff09;01 Jon Skeet个人名望&#xff1a;程序技术问答网站Stack Overflow总排名第一的大…

.net5或.net6(Preview) 之 顶级语句

创建一个控制台项目&#xff0c;.net5或.net6(Preview)&#xff0c;在Program.cs中写如下代码&#xff0c;F5&#xff0c;能顺利跑起来&#xff0c;没有Program类&#xff0c;没有Main函数。这是C#9带来的顶级语句的功能。System.Console.WriteLine("你好,C#");其实这…

班尼机器人维修方法_梅州市ABB机器人控制器维修中心

梅州市ABB机器人控制器维修中心库卡机器人KSP600-3X64库卡KSP控制器驱动器报警KSP600-3X64/00198268KSP600-3x20/ECMAS3D2224BE531/KSP600-3x40/ECMAS3D4444BE531/产品名称:库卡KSP600-3X64伺服包维修库卡KR控制系统伺服包型号:库卡机器人驱动模块KSP600-3x20/ECMAS3D2224BE531…

c# 获取当前活动窗口句柄,获取窗口大小及位置

2019独角兽企业重金招聘Python工程师标准>>> 需调用API函数 需在开头引入命名空间 using System.Runtime.InteropServices; 获取当前窗口句柄:GetForegroundWindow() [DllImport("user32.dll", CharSet CharSet.Auto, ExactSpelling true)] public stat…

Uno 平台 一 WinUI终极跨平台方案(二)

上篇《Uno 平台 一 WinUI终极跨平台方案&#xff08;一&#xff09;》简单介绍了Uno平台3.6版本的更新内容&#xff0c;大家评论里持怀疑态度的人很多&#xff0c;主要还是Uno平台非微软官方发布&#xff0c;咱们.net技术方向的已经习惯于在微软一家技术支持下&#xff0c;最多…

java 方法执行结束局部变量释放_Java方法执行的内存模型

Java虚拟机栈&#xff1a;Java方法执行的内存模型Java虚拟机栈&#xff1a;Java方法执行的内存模型Java方法执行的内存模型当前线程&#xff1a;当前栈帧局部变量表操作数栈动态链接返回地址等信息...栈帧3栈帧2栈帧1线程3线程2线程1每个方法一被调用&#xff0c;就会有一个栈帧…

程序员单身真的是有理由的吗?

全世界只有3.14 % 的人关注了数据与算法之美因为特殊职业的缘故程序员身边的女孩可谓是少之又少工作忙碌&#xff0c;没时间谈恋爱所有单身也就不足为奇了不过&#xff0c;通过我们观察&#xff0c;还是有不少程序员早早脱了单至于&#xff0c;脱单失败的各位&#xff0c;那真的…

瞒不住了,难怪.NET进大厂这么难!

六一儿童节&#xff0c;代表着金三银四铜五的跳槽季正式过去了&#xff0c;几家欢喜几家愁&#xff01;既看到微软腾讯阿里百度的大厂offer&#xff0c;又不禁羡慕30k、40k、50k的高薪&#xff0c;当然更多的&#xff0c;其实还是各种面试被怼的故事。成功的经验五花八门&#…

华为Mate30与大疆手机云台3_更便捷更从容,大疆DJI OM 4手机云台使用体验

不多不少&#xff0c;距离2019年的8月正好过去了一年。在去年8月&#xff0c;大疆为消费者带来了全新的手机云台——OSMO Mobile 3&#xff0c;其最大特点莫过于采用可折叠式的机身设计以及那仅为405g的云台重量&#xff0c;让手机云台随身携带不再是一种累赘&#xff0c;而是一…

数理思维这样培养才有效,从小就赢在方法上,每本不足3元!!

▲卢sir特别推荐点击上图进入玩酷屋重视教育的家长会发现&#xff0c;以前盛行的“学好数理化&#xff0c;走遍天下都不怕”&#xff0c;现在教育部和学校都超重视的STEAM教育&#xff0c;数学和物理一直都是其中最为重要的学科。从长远的教育来看&#xff0c;数理思维好的孩子…