瀑布流实现
window.onload = function(){ imgLocation('container', 'box'); window.onscroll = function(){ var imgData = { "data":[ {"src" : "1.jpg"}, {"src" : "2.jpg"}, {"src" : "3.jpg"}, {"src" : "4.jpg"}, {"src" : "5.jpg"}, {"src" : "6.jpg"} ] }; if(checkFlag()){ var oParent = $('container'); for(var i = 0; i < imgData.data.length; i++){ var createdBox = document.createElement('div'); createdBox.className = 'box'; oParent.appendChild(createdBox); var imgBox = document.createElement('div'); imgBox.className = 'box_img'; createdBox.appendChild(imgBox); var img = document.createElement('img'); img.src = 'img/' + imgData.data[i].src; imgBox.appendChild(img); } } imgLocation('container', 'box'); }; }; /** 判断何时滚动加载 */ function checkFlag(){ var oParent = $('container'); var oBoxs = getByClass(oParent, 'box'); var lastBoxDistance = oBoxs[oBoxs.length - 1].offsetTop; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var viewportHeight = document.documentElement.clientHeight || document.body.clientHeight; if(lastBoxDistance < (scrollTop + viewportHeight)){ return true; } } function imgLocation(parent, childClsName){ var oParent = $(parent); var oBoxs = getByClass(oParent, childClsName); //console.log(oBoxs); var imgWidth = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth / imgWidth); oParent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto"; /*第一行盒子的高度集合*/ var boxHeightArr = []; for(var i = 0; i < oBoxs.length; i++){ if(i < cols){ boxHeightArr[i] = oBoxs[i].offsetHeight; }else{ //第一行中最小高度的值 var minHeight = Math.min.apply(null, boxHeightArr); console.log(minHeight); var indexOfMinHeight = getMinHeightIndex(boxHeightArr, minHeight); console.log(indexOfMinHeight); oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minHeight + 'px'; oBoxs[i].style.left = oBoxs[indexOfMinHeight].offsetLeft + 'px'; //更新高度 boxHeightArr[indexOfMinHeight] = boxHeightArr[indexOfMinHeight] + oBoxs[i].offsetHeight; } } } function getMinHeightIndex(boxHeightArr, minHeight){ for(var height in boxHeightArr){ if(boxHeightArr[height] == minHeight){ return height; } } } function getByClass(parent, childClsName){ var resultArr = [], allElements = parent.getElementsByTagName('*'), i = 0; for(i = 0; i < allElements.length; i++){ if(allElements[i].className == childClsName){ resultArr.push(allElements[i]); } } return resultArr; } function $(id){ return document.getElementById(id); }
不错。。。。