JavaScript简单的实现瀑布流
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript简单的实现瀑布流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2684字，纯文字阅读大概需要4分钟。
内容图文
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，相信有些同学还是并不太懂或者并没有了解过瀑布流是什么，那么我们今天就来详细的讲一下JavaScript是如何实现瀑布流的吧。知识点：
1、如何找到数组中的最小值.
默认第一个为最小值，绑定一个变量a 。通过for循环将数组其它值与该值进行对比，如果 前者小则将其赋值给a；
var arr = [3,52,3,2,-2,-1,20];
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < arr[0]) {
min = arr[i];
}
}
alert(min);2、怎样获取文档坐标
//获取父元素节点
var op = ele.parentNode;
则ele文档坐标：水平：op.offsetLeft + op.clientLeft + ele.offsetLeft;
垂直：op.offsetTop + op.clientTop + ele.offsetTop;3、获取随机整数函数
function rnd(min,max) {
return parseInt(Math.random()*(max - min + 1)) + min;
}4、瀑布流代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#wrap {
overflow: hidden;
margin-top: 100px;
}
#wrap li {
float: left;
width: 250px;
font-size: 56px;
margin: 0 20px;
list-style-type: none;
}
#wrap li p {
margin-bottom: 20px;
border: 1px solid red;
background-color: #ccc;
}
</style>
</head>
<body>
<ul id="wrap">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<p style="height: 1000px;">
</p>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var list = wrap.getElementsByTagName("li");
function rnd(min, max) {
return parseInt(Math.random()*(max - min + 1)) + min;
}
//文档坐标获取
function getPosition(element) {
var oP = element.offsetParent;
var x = element.offsetLeft;
var y = element.offsetTop;
while(oP) {
//水平
x = oP.clientLeft + x + oP.offsetLeft;
//竖直
y = oP.clientTop + y + oP.offsetTop;
oP = oP.offsetParent;
}
return {x:x,y:y}
}
function createDiv() {
for(var j = 0; j < 10; j++) {
//找最小高度的li那一列
var minList = list[0];
for(var i = 0; i < list.length; i++) {
if(minList.offsetHeight > list[i].offsetHeight) {
minList = list[i];
}
}
var newDiv = document.createElement("p");
newDiv.style.height = rnd(100,200) + "px";
newDiv.innerHTML = j;
minList.appendChild(newDiv);//将创建p添加到最新的li那一列
}
}
createDiv();
//可视区的宽高document.documentElement.clientWidth
//页面滚动条事件
window.onscroll = function() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//wrap的文档坐标+wrap自身高度 跟滚动条scrollTop+可视区高度比较
if(getPosition(wrap).y + wrap.offsetHeight <= scrollTop + document.documentElement.clientHeight) {
// alert("到底了");
createDiv();
}
}
</script>
</body>
</html>瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
以上就是JavaScript简单的实现瀑布流的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JavaScript简单的实现瀑布流全部内容，希望文章能够帮你解决JavaScript简单的实现瀑布流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。