瀑布流效果

我相信每天都做一点对学习是肯定有帮助的,不管它是简单还是难的,今天可能比较懒,没有去做很多的学习上的事情,就下午的时候静下心来学习巩固自己,现在很多人都在模仿着做网上很多大型网站的瀑布流的效果,我也就跟随潮流。。。现在的瀑布流有两个实现的派别,我称之为浮动流和定位流!不分哪个好坏,我纯粹是个人的爱好使我向着浮动流的。。。又去淘宝上抓了点图。。。呵呵,不会收我版权费的吧!代码奉上:

<script>
<!--
//于fgm.cc的调用函数,省事
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
//随机数
function randomnum(numMin, numMax) {
return Math.floor(Math.random() * numMax) + numMin;
};
//生成单个图片层
function forImg()
{
var resultdiv=document.createElement("div");
resultdiv.className="result_item";
var ran=randomnum(1,16);
var resultimg=document.createElement("img");
resultimg.src="img/wow"+ran+".jpg";
resultdiv.appendChild(resultimg);
return resultdiv;
}
//生成图片板块
function loadimg(imgcount,element){
for(var i=1;i<=imgcount;i++)
{
var num=i%4;
switch(num)
{
case 1: { element[0].appendChild(forImg());break;}
case 2: { element[1].appendChild(forImg());break;}
case 3: { element[2].appendChild(forImg());break;}
case 0: { element[3].appendChild(forImg());break;}
}
}
}
window.onload=function(){
var list=get.byId("list");
var li=get.byClass("list_item",list);
var loading=get.byId("loading");
var isTop=true;//防止事件多次执行
loadimg(16,li);
window.onscroll=function(){
if(isTop)
{
var allheigth=document.documentElement.scrollTop==0?document.body.scrollTop:document.documentElement.scrollTop;
var heigth=document.documentElement.scrollHeight-document.documentElement.clientHeight-allheigth;
if(heigth==0)
{
isTop=false;
setTimeout(function(){
loadimg(4,li);
loading.style.top=document.documentElement.scrollHeight+"px";
loading.style.display="block";
isTop=true;
},1000);
}
}
}
}
-->
</script>

然后国际惯例:demo地址:

http://www.cowll.com/demo/wowtaobao.html

可能还有纰漏,还不完善,我会尽力去完善它的!

posted @ 2012-03-04 20:27  Jmarry  阅读(652)  评论(0编辑  收藏  举报