前言
完成一个动漫人物的瀑布流布局,分别通过原生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;
}
四 Reference
??1 js改变css样式的三种方法;