瀑布流布局（1）

前言

完成一个动漫人物的瀑布流布局，分别通过原生JavaScript、Css3和Jquery方式实现。
首先是使用JavaScript。

一、创建基本框架

1 HTML结构

<main>                    //便于以后进行 相对定位<div class="wrap">    //为了方便设置图片和图片之间样式+绝对定位<div class="pic">   //包裹图片，设置单个图片的样式<img src="img/1.jpg" alt="图片1"></div></div> 
</main>

2 CSS基本样式

*{                       /* 简单全局重置 */margin: 0;padding: 0;
}main{position: relative;    /*相对布局*/
}.wrap{padding: 15px 0 0 15px;  /*设置内边距，便于以后JS计算高度*/
}.pic{border: 1px solid #ccc;padding: 10px;border-radius: 5px;          /*设置边框圆角 */box-shadow: 0 0 6px #ccc;  /*水平、垂直偏移；模糊度；颜色*/
}.pic img{width: 162px;    /*瀑布流特点，图片等宽不等高 */height: auto;
}

二、设置图片的定位和排序

1 设置列数和main的宽度

window.onload=function(){waterfall("main",".wrap");
}function waterfall(parent,box){var oneparent = document.querySelector(parent);   //获取main元素//S1 获取main元素里面的所有 类warp元素var boxs = oneparent.querySelectorAll(box);    //S2 计算整个页面显示的列数；（页面宽/每列的盒子wrap宽）var oneboxwidth = boxs[0].offsetWidth;    //每列的盒子wrap宽var cols = Math.floor(document.documentElement.clientWidth / oneboxwidth) ; //获取 整数列数//S3 设置main的 固定宽度oneparent.style.cssText = 'width:' + (oneboxwidth * cols)+'px; margin:0 auto';
}

2 获取第一列图片的高度

window.onload=function(){waterfall("main",".wrap");
}function waterfall(parent,box){var oneparent = document.querySelector(parent);   //获取main元素// 获取main元素里面的所有 类warp元素var boxs = oneparent.querySelectorAll(box);    ............//获取第一列图片的高度//S1 存放数据的 数组var boxsHeightArry = [];//S2 获取图片高度并存放for (var i=0; i<boxs.length; i++){if(i < cols){boxsHeightArry.push(boxs[i].offsetHeight);}}console.log(boxsHeightArry);
}

3 绝对定位，把以后的图片，都放到第一行最矮的下方

 //S1 存放数据的 数组var boxsHeightArry = [];//S2 获取图片高度并存放for (var i=0; i<boxs.length; i++){if(i < cols){boxsHeightArry.push(boxs[i].offsetHeight);}else{//S1 获取第一行的最小值&索引值minBoxHeight = Math.min.apply(null,boxsHeightArry);minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);//S2 调试   console.log( minBoxHeightIndex);//S3 设置第二行及以后行 图片的绝对定位位置boxs[i].style.position = "absolute";boxs[i].style.top = minBoxHeight + 'px';boxs[i].style.left = oneboxwidth * minBoxHeightIndex + 'px';}}

4 每次循环时都增加后放的图片的高度，从而改变数组里最矮的值

else{ //S1 获取第一行的最小值&索引值minBoxHeight = Math.min.apply(null,boxsHeightArry);minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);//S2 调试 console.log( minBoxHeightIndex);//S3 设置第二行及以后行图片的 绝对定位位置boxs[i].style.position = "absolute";boxs[i].style.top = minBoxHeight + 'px';// boxs[i].style.left = oneboxwidth * minBoxHeightIndex + 'px';boxs[i].style.left = boxs[minBoxHeightIndex].offsetLeft + 'px';//从第二行开始，每次循环时都增加后放的图片的高度，从而改变数组里最矮的值boxsHeightArry[minBoxHeightIndex] += boxs[i].offsetHeight;
}