}
.Box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
Box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}

Box"); //调用自定义函数;作用于main下的每一个Box元素; var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]} //模拟json数据; window.onscroll = function () { if (checkScrollSlide) { //调用自定义函数;根据函数返回值确定滚动是否超出范围; var oParent = document.getElementById("main"); for (var i = 0; i < dataInt.data.length; i++) { var oBox = document.createElement("div"); oBox.className = "Box"; oParent.appendChild(oBox); //创建Box块 var oPic = document.createElement("div"); oPic.className = "pic"; oBox.appendChild(oPic); //创建pic块 var oImg = document.createElement("img"); //创建img元素 oImg.src = "images/"+dataInt.data[i].src; //设置图片引用; oPic.appendChild(oImg); }; waterfall("main","Box"); //将动态生成的数据块进行流式布局; }; }; }; //流式布局主函数,自动调整数据块的位置; function waterfall (parent,Box) { //将main下的所有Box元素取出;"parent"代表父级,Box代表Box元素; var oParent = document.getElementById(parent); //将父级元素赋值给变量oParent; var oBoxs = getByClass(oParent,Box); //通过自定义函数,获取父级下的每一个Box元素;得到的是所有Box元素的集合; //再次将这个得到的Box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用); // console.log(oBoxs.length); //在控制台中打印出Box元素的数量,用于调试; var oBoxW = oBoxs[0].offsetWidth; //计算出每一列的宽度;offsetWidth包含内边距在内的宽度; // console.log(oBoxW);测试; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //计算整个页面显示的列数(页面宽/Box的宽); oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto"; //父元素main的宽度=每一列的宽*列数;并且左右居中; var hArr = []; //存放每一列高度的数组; for (var i = 0; i < oBoxs.length; i++) { //遍历oBoxs数组; if (iBoxs[i].offsetHeight); //得出每一列的高度放入数组中; }else{ //这里的Box元素已经不是第一行的元素了; var minH = Math.min.apply(null,hArr); //得出第一行的最小高度并赋值给变量; // console.log(minH); var index = getMinhIndex(hArr,minH); //调用自定义函数获取这个变量的index值; oBoxs[i].style.position = "absolute"; oBoxs[i].style.top = minH+"px"; oBoxs[i].style.left = oBoxW*index+"px"; //设置当前元素的位置; //当前元素的left值=顶上的元素的index值*每列的宽度; //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px"; //第二种获取当前元素的left值; //此时在第index列添加了一个Box元素; hArr[index]+=oBoxs[i].offsetHeight; //每一列更新后的高度=每一列原来的高度+后来添加的Box元素的高度; }; }; }; //js原生通过Class获取元素; function getByClass (parent,claName) { //通过class获取元素;(在父级parent的容器下获取claName的元素;) var BoxArr = new Array(); //声明数组,用来存储获取到的所有class为Box的元素; var oElements = parent.getElementsByTagName("*") //声明变量用来存储此父元素下的所有子元素(*); for (var i = 0; i < oElements.length; i++) { //遍历数组oElements; if (oElements[i].className==claName) { //如果数组中的某一个元素的calss类与参数claName相同; BoxArr.push(oElements[i]); //则把遍历到的这个Box元素归类到BoxArr数组; }; }; return BoxArr; //调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数; }; //获取数组元素的index值; function getMinhIndex (arr,val) { //arr是父级数组;val是当前元素; for(var i in arr){ //从0开始遍历; if(arr[i]==val){ //找到当前元素在数组中对应的index值; return i; //函数返回值即是当前元素的index值; }; }; }; //检测是否具备了滚动加载数据块的条件; 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); //最后一个Box元素距离页面顶部的高度(找到最后一个Box(oBoxs.lenght-1)的offsetTop)+自身的一半; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //浏览器滚动条滚动的距离; // console.log(scrollTop); var height = document.body.clientHeight || document.documentElement.clientHeight; //浏览器视口的高度; // console.log(height); return (lastBoxH页面滚动的距离是否大于最后一个Box元素的offsetTop; };