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

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

效果图：

代码如下：

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()

}

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

html li 做瀑布流,js实现瀑布流效果（自动生成新的内容）相关推荐

js实现根据身份证号自动生成出生日期
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> ...
积跬步，聚小流-------js实现placeholder的效果
前几天在"技术问答"上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说.了解的多了才干说起来言简意赅,用最简单的语言描写叙述最清晰的表达. 可是plac ...
JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
自动生成马斯克的推特几乎无破绽！MIT用GPT-2模型做了个名人发言模仿器
铜灵发自凹非寺量子位出品 | 公众号 QbitAI 模仿各路名人的推特行文,现在可以分分钟做到. MIT的研究科学家.深度学习课老师Lex Fridman做了一个新应用: DeepTweets ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
通过JS实现瀑布流效果
JS实现瀑布流效果效果图 HTML部分以及css样式 <head><meta charset="UTF-8"><meta http-equiv=&q ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果. 因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据 ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...

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

html li 做瀑布流,js实现瀑布流效果（自动生成新的内容）相关推荐

最新文章

热门文章