JavaScript简单的实现瀑布流

来源：保捱科技网

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，相信有些同学还是并不太懂或者并没有了解过瀑布流是什么，那么我们今天就来详细的讲一下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简单的实现瀑布流