首页 > 代码库 > 简单瀑布流封装
简单瀑布流封装
function createLi(){ var oLi=document.createElement(‘li‘); oLi.style.height=parseInt(50+Math.random()*400)+‘px‘; oLi.style.background=‘rgb(‘+rnd(0,255)+‘,‘+rnd(0,255)+‘,‘+rnd(0,255)+‘)‘; return oLi; }; function rnd(n,m){ return parseInt(Math.random()*(m-n+1)+n); }; window.onload=function(){ oDiv=document.getElementById(‘div1‘); var aUl=oDiv.children; function create(){ for(var i=0; i<20; i++){ var oLi=createLi(); var arr=[]; for(var j=0; j<aUl.length; j++){ arr[j]=aUl[j]; }; arr.sort(function(oUl1,oUl2){ return oUl1.offsetHeight-oUl2.offsetHeight; }); arr[0].appendChild(oLi); } }; create(); window.onscroll=function(){ var winH=document.documentElement.clientHeight; var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollHeight=document.body.scrollHeight; if(scrollTop>=scrollHeight-winH-200){ create(); } } }
以上代码 是简单的瀑布流的封装代码 ,这里做的是滚动的时候随机出不同的颜色,
效果是这样的,大家可以试一下
简单瀑布流封装
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。