mysql实现瀑布流_JavaScript：实现瀑布流

//=== 值比较 类型比较

function$(id) {return typeof id === 'string' ?document.getElementById(id) : id

}//当窗口加载完毕

window.onload = function() {//瀑布流布局

WaterFall('main', 'box');//滚动加载盒子

window.onscroll = function() {if(CheckWillLoad()){ //具备滚动的条件

//造数据

var dataArr = [{'src': '10.png'},{'src': '11.png'},{'src': '13.png'},{'src': '15.png'},{'src': '17.png'},{'src': '19.png'},{'src': '21.png'},{'src': '23.png'}];//遍历

for(var i=0; i

var newBox = document.createElement('div');

newBox.className= 'box';

$('main').appendChild(newBox);var newPic = document.createElement('div');

newPic.className= 'pic';

newBox.appendChild(newPic);var newImg = document.createElement('img');

newImg.src= 'images/' +dataArr[i].src;

newPic.appendChild(newImg);

}//重新实现瀑布流布局

WaterFall('main', 'box');

}

}

};//http://blog.sina.com.cn/s/blog_966e43000101bplb.html//瀑布流布局

functionWaterFall(parent, child) {//------ 父盒子居中

//1.1 拿到所有的子盒子

var allBox =document.getElementsByClassName(child);//1.2 求出其中一个盒子的宽度

var boxWidth = allBox[0].offsetWidth;//1.3 求出页面的宽度

var clientWidth =document.body.clientWidth;//1.4 求出列数

var cols = Math.floor(clientWidth /boxWidth);//1.5 父盒子居中 css赋值都是String类型

$(parent).style.width = boxWidth * cols + 'px';

$(parent).style.margin= '0 auto';//------ 子盒子的定位

//1.1 定义高度数组

var heightArr =[];//1.2 遍历所有的盒子

for(var i=0; i

var boxHeight =allBox[i].offsetHeight;//1.2.2 判断

if(i < cols){ //第一行

heightArr.push(boxHeight);

}else{ //剩余的行

//取出数组中最矮的盒子的高度

var minBoxHeight = Math.min.apply(this, heightArr);//取出数组中最矮的盒子的索引

var minBoxIndex =GetMinBoxIndex(heightArr, minBoxHeight);//子盒子定位

allBox[i].style.position = 'absolute';

allBox[i].style.top= minBoxHeight +'px';

allBox[i].style.left= boxWidth * minBoxIndex + 'px';//更新数组中最矮盒子的高度

heightArr[minBoxIndex] +=boxHeight;

}

}//console.log(heightArr, minBoxHeight, minBoxIndex);

}//获取最矮盒子的索引

functionGetMinBoxIndex(arr, value) {for(var i=0; i

}

}//判断是否具备加载条件

functionCheckWillLoad() {//1.1 获取最后的一个盒子

var allBox = document.getElementsByClassName('box');var lastBox = allBox[allBox.length - 1];//1.2 求出高度的一半 + 头部偏离的高度

var lastBoxDis = lastBox.offsetHeight * 0.5 +lastBox.offsetTop;//1.3 求出页面的高度 JS存在兼容性问题 ---> 标准模式 混杂模式

var clientHeight = document.body.clientHeight ||document.documentElement.clientHeight;//1.4 求出页面偏离浏览器的高度

var scrollTopHeight =document.body.scrollTop;//1.5 判断返回

return lastBoxDis <= clientHeight +scrollTopHeight;

}