/* 瀑布流效果 1、第二行的第一张图片,应该放在每列的高度最矮的图片下面 */ // 1、动态设置页面居中 window.onload = function(){ waterFlow(); } function waterFlow(){ // 获取父级容器 var parentContainer = document.getElementById("container"); // 获取子元素 var allChild = document.getElementsByClassName("box"); // 获取屏幕 var screenWidth = document.documentElement.clientWidth; // 获取一个图片容器的宽度 var childWidth = allChild[0].offsetWidth; // 计算屏幕水平方向最多能摆放的图片个数 var rowsNum = Math.floor(screenWidth / childWidth) - 1; // 向下取整,预留一张作为空白区 // 让页面左右居中 parentContainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;"; getMinHeightOfCols(allChild,rowsNum); } // 2、动态设置图片位置 function getMinHeightOfCols(allChild,rowsNum){ // 数组存储每列的高度 var colsHeightArr = []; for(var i = 0;i < allChild.length;i++){ // 判断取出第一行的图片,获取图片对应的高度,放入到数组中 if(i < rowsNum){ // i=6 // 获取当前图片的高度 colsHeightArr[i] = allChild[i].offsetHeight; }else{ // 获取一列高度最小的值 var minHeightOfCols = Math.min.apply(null,colsHeightArr); // 获取最小值对应的下标((位置) var minHeightOfIndex = colsHeightArr.indexOf(minHeightOfCols); // 摆放第二张图片的位置 allChild[i].style.position = "absolate"; allChild[i].style.top = minHeightOfCols+"px"; allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft+"px"; //高度的合并 colsHeightArr[minHeightOfIndex]=colsHeightArr[minHeightOfIndex]+allChild[i].offsetHeight; } } }
找了好几遍,不知道为什么,总是有那个空隙?