利用JavaScript制作瀑布流

今天看了网上老师关于瀑布流的教程，学习做了一个，效果如下：

（1）页面布局：
瀑布流的特点是每一个图片块等宽不等高
每一个图片块是由三部分包裹组成：
1.一个大的div，className为box，它有内边距padding，用于里面小的div之间的间隔，（用padding不用margin的原因是：js获取数据块的高度时（ offsetHeight） 包括图片所在的盒子高度和数据块间的距离 offsetHeight包含padding的值而不能将margin的值计入在内），如图所示：

2.大div里面的小div，className为pic；
3.pic里面的图片img

<div id="main"><div class="box"><div class="pic">"images/0.jpg" alt="">div>div><div class="box"><div class="pic">"images/1.jpg" alt="">div>div><div class="box"><div class="pic">"images/2.jpg" alt="">div>div><div class="box"><div class="pic">"images/3.jpg" alt="">div>div><div class="box"><div class="pic">"images/4.jpg" alt="">div>div><div class="box"><div class="pic">"images/5.jpg" alt="">div>div><div class="box"><div class="pic">"images/6.jpg" alt="">div>div><div class="box"><div class="pic">"images/7.jpg" alt="">div>div>      

*{margin:0;padding: 0;
}
.main{position: relative;
}/* 用padding而不用换margin的原因：js获取数据块的高度时（ offsetHeight） 包括图片所在的盒子高度和数据块间的距离offsetHeight包含padding的值而不能将margin的值计入在内 */
.box{padding: 15px 0 0 15px; float:left;
}.pic{padding: 10px;border: 1px solid gray;border-radius: 5px;box-shadow: 0 0 5px gray;
}
/* 瀑布流的特点是等宽不等高 */
.pic img{width: 165px;height: auto;
}

（2）实现瀑布流方式排列：

瀑布流的原理是在确定第一行图片块的列数后，第二行开始，判断每一列的高度，新的图片块box放在高度最小的那一列下面，放完之后接下来的图片块也判断每一列的高度，放在高度最小的那一列下面，以此类推。

//写一个函数，用于瀑布流，两个参数：（1）父元素ID（2）每个块的class
function waterfall(parentId,boxClass)
{//获取父元素var oParent=document.getElementById(parentId);//获取class为boxClass的块；var aBoxs=getByclass(oParent,boxClass);//为了让浏览器变大变小的时候瀑布流的列数保持不变，要计算并确定列数，并保证父元素main的宽度不变//换句话说，就是确定列数，求出main宽度//每个盒子的宽度//这里的clientWidth是页面的宽度，你刷新后伸展拉索都保持不变，但你宽度变了，在刷新，就会改变var oBoxW=aBoxs[0].offsetWidth;//求出列数var colsNum=Math.floor(document.documentElement.clientWidth/oBoxW);//设置父元素的宽度oParent.style.cssText='width:'+oBoxW*colsNum+'px;margin:0 auto;';/*    alert(colsNum);*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////创建一个数组，用于保存每一列的高度，每一个块排列上去时，先判断每一列的高度，哪个最小，就放在哪个下面var hArr=[];for(var i=0;iif(ielse{var minH=Math.min.apply(null,hArr);var index=getMinhIndex(hArr,minH);//得到的就是第几个块高度中最小的//对下一个块的位置left top进行设置aBoxs[i].style.position='absolute';aBoxs[i].style.top=minH+'px';aBoxs[i].style.left=aBoxs[index].offsetLeft+'px';//aBoxs[i].style.left=oBoxW*index+'px';hArr[index]+=aBoxs[i].offsetHeight;}}
}function getByclass(oParent,sClass){var aResult=[];var aEle=oParent.getElementsByTagName('*');for(var i=0;iif(aEle[i].className==sClass){aResult.push(aEle[i]);}}return aResult;
}//写一个函数，知道一个数组中某个元素的值，通过这个值，找到这是数组中的第几个元素
function getMinhIndex(arr,val)//第一个参数是数组，第二个参数是某元素的值
{for(var i in arr){if(arr[i]==val){return i;}}
}

（3）实现图片加载功能：

原理：利用window.onscroll，当最下面一个图片块显示出一半的时候，开始加载新的图片，写一个判断函数来判断是否到最后一张图片一半，加载方式利用DOM操作，createElement和appendChild.

//写一个函数，用于判断是否具备了滚条加载数据库的条件
function checkScrollSlide()
{var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;var clientH=document.documentElement.clientHeight;var nowScrollHeight=scrollTop+clientH;var oParent=document.getElementById('main');var aBoxs=getByclass(oParent,'box');var lastBoxH=aBoxs[aBoxs.length-1].offsetTop+Math.floor(aBoxs[aBoxs.length-1].offsetHeight/2);if(nowScrollHeight>lastBoxH){return true;}else{return false;}}
window.onload=function()
{waterfall('main','box');//不做连接数据库的，写一个jsonvar dataInt={"data":[{'src':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'},{'src':'10.jpg'},{'src':'11.jpg'},{'src':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'}]}window.onscroll=function(){if(checkScrollSlide()){var oParent=document.getElementById('main');for(var i=0;ivar oBox=document.createElement('div');oBox.className='box';oParent.appendChild(oBox);var oPic=document.createElement('div');oPic.className='pic';oBox.appendChild(oPic);var oImg=document.createElement('img');oImg.src="images2/"+dataInt.data[i].src;oPic.appendChild(oImg);}waterfall('main','box');}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！