学习瀑布流记录@慕课网原创_慕课网

1.通过定位来找位置

2.确定top，用最小高度的下标来确定left

3.document.documentElement.clientWidth

4.Math.min.apply(null,数组）

5.高度要存在一个数组中

6.特别注意事件里面的事件对当前父元素的获取。。

注：其中的原因不明，学习后面再回顾

<!DOCTYPE html>

<html>

<head>

*{margin:0;padding:0;}

#main{position:relative;}

.box{padding:5px;

float:left;}

.boximg{padding:5px;

border:1px solid red;

border-shadow:0 0 5px #cccccc;

border-radius:5px;}

img{width:250px;

height:auto;}

</style>

window.=function()

{

myplay();

var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};

window.onscroll=function()

{

var oparend=document.getElementById("main"); //这里又重新获取当前父元素main

var obox=myclassbox(oparend,"box"); //这里又重新获取了一次box;

var lastboxH=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);

var scrollH=document.documentElement.scrollTop||document.body.scrollTop;

var windowH=document.documentElement.clientHeight||document.body.clientHeight;

if(lastboxH<windowH+scrollH)

{

for(var i=0;i<dataInt.data.length;i++)

{

var omain=document.getElementById("main"); //这里又重新获取了一次main，获取的是最新的main；main是随着鼠标滚动而不停变化的

var oBox=document.createElement("div");

oBox.className="box";

omain.appendChild(oBox);

var oBoximg=document.createElement("div");

oBoximg.className="oboximg";

oBox.appendChild(oBoximg);

var oimg=document.createElement("img");

oimg.src="img/"+dataInt.data[i].src;

oBoximg.appendChild(oimg);

}

myplay();

}

function myplay()

{

var main=document.getElementById("main");

var boxs=myclassbox(main,"box");

var boxsW=boxs[0].offsetWidth;

var bodyW=document.documentElement.clientWidth;

var cols=Math.floor(bodyW/boxsW);

var mainW=cols*boxsW;

//让main居中，找到宽和列数

main.style.cssText="width:"+mainW+"px;margin:0 auto";

//根据高度来定位

var boxsH=[];

for(var i=0;i<boxs.length;i++)

{

if(i<cols)

{

boxsH.push(boxs[i].offsetHeight);

}

else

{

boxs[i].style.position="absolute";

minH=Math.min.apply(null,boxsH);

boxs[i].style.top=minH+"px";

for(var j=0;j<boxsH.length;j++)

{

if(boxsH[j]==minH)

{

var index=j;

}

var minW=index*boxsW;

boxs[i].style.left=minW+"px";

}

boxsH[index]+=boxs[i].offsetHeight;

}

function myclassbox(parent,classN)

{

var oparent=parent.getElementsByTagName("*");

var Boxs=new Array(); //在IE中不能用ByClassName，所以只能通过数组的方式找class名为box的元素

for(var i=0;i<oparent.length;i++)

{

if(oparent[i].className==classN)

{

Boxs.push(oparent[i]);

}

return Boxs;

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>