JS瀑布流
HTML瀑布流布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/waterfall.js"/></script>
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float:left;
}
.pin{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pin">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pin">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
</html>
js实现瀑布流布局
window.οnlοad=function(){
waterfall('main','box');
}
function waterfall(parent,box) {
// 获取mian下的所有box元素
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box)
console.log(oBoxs.length)
//计算页面的列数
var oBoxW=oBoxs[0].offsetWidth;
var clos=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置class=main的宽
oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto';
//找到最小的高度
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<clos){
//第一行开始的高度盒子添加到hArr中,并且不断添加新的高度,固定列数
hArr.push(oBoxs[i].offsetHeight)
}else{
//当前oBoxs中的最小高度
var minH=Math.min.apply(null,hArr)
//最小高度oBoxs的索引,index的长度为一行中的图片个数
var index=getMinhIndex(hArr,minH)
//改变oBoxs的位置
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.position='absolute';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
//添加到从第一行开始的数组中
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log(oBoxs)
}
function getByClass(oParent,clsName) {
var oElements=oParent.children;
var boxArr=[];
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i])
}
}
return boxArr;
}
function getMinhIndex(arr,minH) {
for(var i in arr){
if(arr[i]==minH){
return i
}
}
}
利用onscroll实现瀑布流
不断加载,实现一直处于加载的底部
滚动加载事件的条件:当到达最后一张图片的时候,也就是蓝线的距离小于黑线的距离,执行加载!
蓝线的距离:页面顶部到最后一个图片高度一半的距离
黑线的距离:top+documentElement.clientHeight(浏览器可视窗口的距离)
下面的情况不允许加载:蓝线.height>黑线.height
//滚动加载的条件 function checkScrollSlide() { var oParent=document.getElementById('main') var oBoxs=getByClass(oParent,'box') var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容性 var documentH=document.documentElement.clientHeight;//页面高度 return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数 console.log(documentH) }创建window.οnscrοll=function(){},并将模拟的后台加载数据dataInt放置在页面底部
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.οnscrοll=function(){ if(checkScrollSlide) { //将数据块渲染到当前页面的尾部 for (var i = 0; i < dataInt.data.length; i++) { //首先找到父对象 var oParent = document.getElementById('main'); var oBox = document.createElement('div'); oBox.className = 'box'; oParent.appendChild(oBox); var oPin = document.createElement('div'); oPin.className = 'pin'; oBox.appendChild(oPin); var oImg = document.createElement('img'); oImg.src = './images/' + dataInt.data[i].src; oPin.appendChild(oImg); } waterfall('main','box'); } }注:在对加载数据循环之后,需要对加入后的元素,同样需要进行瀑布流布局。