脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript 简单的瀑布流，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 刚开始接触js，就想写写经典的瀑布流，搜了下网上的教程，发现大多是用jquery写的，非常简单，用它也不用考虑兼容性的问题（jquery已经考虑到了），就想自己用原生的jS写个简单的瀑布流模型，暂且没有考虑到拖动时自动排版的情形，以后再添加。（发现用原生的js果然步骤比较多啊！很多方法都很底层的！）
[htML] view plaincopyPRint?在CODE上查看代码片派生到我的代码片
<html>
<head>
<;meta http-equiv="content-type" content="text/html; charset=utf-8" />
<tITle>waterfall flow</title>
<style type="text/css" >
body{margin:0px;}
#main{width:840px;margin:0 auto;}
.flow{float:left;width:200px;margin:5px;background:#abc;}
</style>
</style>
</head>
<body>
<p id="main">
<p class="flow" ></p>
<p class="flow" ></p>
<p class="flow" ></p>
<p class="flow" ></p>
</p>
</body>
<script type="text/javascript">
VAR flowlist = null;
if(document.getElementsByClassName){
var flowlist = document.getElementsByclassname("flow");
} else{
/* 考虑IE的兼容性 */
var flowlist = getMElementsByClassName("p","flow");
}
/* 初始化 */
addItems(flowlist,3);
function getMElementsByClassName (tagname,classname) {
var res = [];
var elements = document.getelementsbytagname("p");
for (var i = 0; i < elements.length; i++) {
if(elements[i].className == classname)
res.push(elements[i]);
};
return res;
}
function addItems(elements,times){
for (var j = 0; j < times; j++) {
for (var i = 0; i < elements.length; i++) {
var newnode = document.createElement("p");
newnode.style.background="#159";
newnode.style.width="90%";
newnode.style.height=getRandom(200,300)+"px";
newnode.style.margin="10px";
elements[i].appendChild(newnode);
};
};
}
/* 考虑兼容性，使用document.documentElement.scrollTop
使用DOM0事件 */
window.onscroll = function(){
// 被卷去的高度
var scrollTop = document.documentElement.scrollTop;
// 页面高度
var pageHeight = document.body.scrollHeight;
// 可视区域高度
var viewHeight = window.screen.availHeight;
console.LOG("被卷去的高度:"+scrollTop + " "+"页面高度:"+pageHeight+" "+"可视区域高度:"+viewHeight);
//当滚动到底部时
if((scrollTop+viewHeight)>(pageHeight-20)){
if(scrollTop<10000){//防止无限制的增长
addItems(flowlist,2);
}
}
}
function getRandom(min,max){
//x上限，y下限
var x = max;
var y = min;
if(x<y){
x=min;
y=max;
}
var rand = parseInt(Math.random() * (x - y + 1) + y);
return rand;
}
</script>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript 简单的瀑布流全部内容，希望文章能够帮你解决javascript代码实例教程-javascript 简单的瀑布流所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。