首页 > 代码库 > 分析老师的瀑布流
分析老师的瀑布流
设 计这个瀑布流的样式就是所有图片宽度相同，高度不同，得到屏幕的宽度（这里为了让点击放大缩小屏幕的时候不至于让样式乱跳，图片移位，所以不使用document.documentElement.clientWidth而是用屏幕分辨率的宽度，window.screen.width）
先把整个外层Div设置成相对定位，然后里面每个包裹图片的Div才可以设置成绝对定位。我们首先要根据屏幕宽度和图片的宽度来确定每一行能放几张图片。
时我们需要自己写两个方法，(由于瀑布流无限加载事件是由滚动条事件触发，每次滚动的时候当数组里的最后一张图片离页首的高度加自身高度的一半小于页首到屏幕自身高度时，我们给往外层Div里扔小Div(白话就是你看到的最后一张图的一半高度的时候，我已经往下继续给添加图片了【实例1】))
第一个是根据外层div和类标签名获取里面所有对应子元素的数组。
function getClassObj(parent,name){
var elements=parent.getElementByTagName("*")
var arrayBox=[];
for (var i = 0; i < oElements.length; i++) {
if (oElements[i].className==clsName) {
boxArr.push(oElements[i]);
}
}
return arrayBox;
}
第二个方法找出数组里最小值在数组里的索引
function getminHIndex(arr, number) {
var index = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i]==number) {
index = i;
}
}
return index;
}
}
第一排div里的图片(比如01.jpg,02.jpg,03.jpg)直接扔数组里面让自动显示然后从第二排开始每张图片都要设置绝对定位。
因为图片都是左浮动，所以要找到第一排在数组中最小高度的第一个图片03，再把第二排的第一个图片04（因为是左浮动所以04位置排到从上开始第一个未占满的位置）排列到03
其下，然后设这04的绝对定位（div数组[i].style.position=” absolute”
apin[i].style.top = 03. offsetHeight（高度）
apin[i].style.left =03. offsetLeft ;（宽度）
因为存放图片高度的数组heightArray[01height,02height,03height] ，我们只需用到第一排的图片的高度值,所以我里面只放第一排的三个值。然后找到第一排图片里高度最小的值03，把存放div的数组divArray里的下一张图片04排列到03下面，然后再把03的高度更改为03+04的高度，那么再循环找数组里高度最小值就是02了，然后再把下一张图片05排列到02下面，设置绝对定位。最后把02在数组里的高度值更改为02=02+05，然后再循环数组里高度最小值就是01了，然后06再排列到01下面，再改变01数组里的高度，依次类推。
---------------------------------------------------------------------------------------------------------------------------------
实例1
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//scrollTop 为垂直滚动条已经滚动的高度，可以理解为网页头部不可见部分的高度（一开始为0，下拉滚动条时，scrollTop变大）
var documentH = document.documentElement.clientHeight;//这是看得见的页面高度
然后放具体代码：
Js代码：
window.onload = function() {
waterfall(‘main‘, ‘pin‘);
var dataInt = { ‘data‘: [{ ‘src‘: ‘94.jpg‘ }, { ‘src‘: ‘95.jpg‘ }, { ‘src‘: ‘96.jpg‘ }, { ‘src‘: ‘97.jpg‘ }] };
window.onscroll = function() {
if (checkscrollside()) {
var oParent = document.getElementById(‘main‘); //父级对象
for (var i = 0; i < dataInt.data.length; i++) {
var oPin = document.createElement(‘div‘); //添加元素节点
oPin.className = ‘pin‘;
oParent.appendChild(oPin);
var oBox = document.createElement(‘div‘);
oBox.className = ‘box‘;
oPin.appendChild(oBox);
var oImg = document.createElement(‘img‘);
oImg.src = ‘images/‘ + dataInt.data[i].src;
oBox.appendChild(oImg);
}
waterfall(‘main‘, ‘pin‘);
}
};
};
/*
parent父级id
pin 元素id
*/
function waterfall(parent,pin) {
var oParent = document.getElementById(parent);
var apin = getClassObj(oParent, pin);//获取存储块框的pin的数组apin
var iPinW = apin[0].offsetWidth;//一个快框的宽
var num = Math.floor(window.screen.width/ iPinW);//每行中能容纳的pin个数
oParent.style.cssText = ‘width:‘ + iPinW * num + "px;margin:0px auto;";//如果不用改属性，那么会出现一种情况，当
//浏览器随着窗口缩小，显示的内容页随之减少，没有滚动条的出现。
var pinHArr = [];//用于存储每列中的所有块框相加的高度。
for (var i = 0; i <apin.length; i++) {
var pinH = apin[i].offsetHeight;//元素的高度
if (i<num) {
pinHArr[i] = pinH;//第一行中的num个块框pin先添加进数组pinHArr
} else { //找出数组中最小的值minH
var minH = Math.min.apply(null, pinHArr);//数组pinHArr的最小值minH
var minHIndex = getminHIndex(pinHArr, minH);
apin[i].style.position = ‘absolute‘;//设置绝对位移
apin[i].style.top = minH + "px";
apin[i].style.left = apin[minHIndex].offsetLeft + "px";
//数组 最小元素的高+天机上的apin[i]块框高
pinHArr[minHIndex] += apin[i].offsetHeight;
}
}
//找出最小值在数组中的索引
function getminHIndex(arr, number) {
var index = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i]==number) {
index = i;
}
}
return index;
}
}
function getClassObj(parent,clsName) {
var oElements = parent.getElementsByTagName(‘*‘);//获取父级的所有子集
var boxArr = [];
for (var i = 0; i < oElements.length; i++) {
if (oElements[i].className==clsName) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function checkscrollside() {
var oParent = document.getElementById(‘main‘);
var apin = getClassObj(oParent, ‘pin‘);
//创建触发添加块函数waterfall()高度：最后一个块框的距离网页顶部+自身高的一半（实现未滚动到底就开始加载）
var lastPinH = apin[apin.length - 1].offsetTop + Math.floor(apin[apin.length - 1].offsetHeight / 2);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条滑动了多少像素
var documentH = document.documentElement.clientHeight;//页面高度
return (lastPinH < scrollTop + documentH) ? true : false;
}
Html源代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://www.mamicode.com/js/waterfull.js"></script>
<link href="http://www.mamicode.com/css/style.css" rel="stylesheet" />
<style type="text/css">
*{padding: 0;margin:0;}
#main {
position: relative;/*相对定位：绝对定位的参照物体，不再参照body*/
}
.pin {
padding: 15px 0px 0px 15px;
float: left;
}
.box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0px 0px 6px #ccc;
border-radius: 5px;
}
.box img {
width: 230px;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/0.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/21.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/22.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/23.jpg"/>
</div>
</div>
</div>
</body>
</html>