效果图
未添加JS特效时样式
由于只是做样式我就没有使用很多图片
HTML
由于我的图片大小 太不一,直接就使用了行内样式来修改
<div id="main">
<div class="box"><div class="pic"><img src="图片/1.jpg" alt="" style="height: 100px"></div></div>
<div class="box"><div class="pic"><img src="图片/2.jpg" alt="" style="height: 50px"></div></div>
<div class="box"><div class="pic"><img src="图片/3.jpg" alt="" style="height: 80px"></div></div>
<div class="box"><div class="pic"><img src="图片/4.jpg" alt="" style="height: 40px"></div></div>
<div class="box"><div class="pic"><img src="图片/5.jpg" alt="" style="height: 70px"></div></div>
<div class="box"><div class="pic"><img src="图片/6.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="图片/7.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="图片/8.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="图片/9.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="图片/10.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="图片/11.png" alt=""></div></div>
</div>
CSS
*{
margin: 0;
padding: 0;
border:none;
}
img{
vertical-align: top; 图片靠顶部
width:200px;
height: 300px;
}
html,body{
width: 100%;
height: 100%;
}
#main{
position: relative; 设置外层盒子为relative 方便后面子盒子定位
}
.box{
float: left; 让所有子盒子左浮动,拜托原来的块级样式
padding:15px 0 0 15px;
在这里这样设置是为了避免在对盒子定位时,需要加很多图片盒子之间的边距设计的
}
.pic{
给每个图片盒子设置统一的样式
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
JS
特效分析
找到第一行中图片高度最小的图片以后
把第二行的第一张图片接在刚才最小的图片下面
由于设置了定位
所以只需要设置后面图片的top值和left值
top值计算:最矮的图片高度,即之后图片的top值
left值计算:需要求到当前最矮图片前面的盒子数以及盒子的大小
最后及时更新最小的长度
不然没啥用
本来还要设置滚动以后,图片继续加载的特效,但是我还没写。之后有时间再写吧
window.onload = function () {
//滚动和加载
//1、实现瀑布流
waterFull("main","box");
//动态加载图片
window.onscroll = function () {
}
};
function waterFull(parent,child) {
//1、父盒子居中
//1、1 获取所有的父盒子
var allbox=$(parent).getElementsByClassName(child);
console.log(allbox);
//1、2获取盒子宽度
var boxwidth=allbox[0].offsetWidth;//每一个子盒子的宽度
//1、3获取屏幕宽度
var ScreenW=document.documentElement.clientWidth;
//1、4求列数
var cols=parseInt(ScreenW/boxwidth);//当前网页大小除以盒子宽度
console.log(cols);
//1、5父盒子居中
$(parent).style.width=cols*boxwidth+'px';//设置总宽度
$(parent).style.margin="0 auto";//让父盒子居中
//2、子盒子定位
//2、1定义高度数组
var height=[];
//2、2 遍历子盒子
var boxH,min,index;
/*boxH:盒子高度
*min:接收此行中最矮图片的高度
*index:用来找当前图片的下标
*/
for(var i=0;i<allbox.length;i++)//遍历所有的图片
{
//2、2、1求每个子盒子的高度
boxH=allbox[i].offsetHeight;
//2、2、2取出第一行盒子的高度,放入高度数组
if(i<cols){
//第一行
height.push(boxH);//求最矮的高度
}else{//剩余行
//从第后一行开始
//1、取出最矮盒子高度
min=Math.min.apply(this,height);//min为height数组中最小的值
//2、求最矮盒子对应的索引
//求索引是为了确定它前面有几个盒子,方便计算left值
index=getminIndex(height,min);
//3、子盒子定位
allbox[i].style.position="absolute";
allbox[i].style.left=index*boxwidth+'px';//下标代表着第几个
allbox[i].style.top=min+'px';
//更新数组中的高度
height[index]+=boxH;//就是让当前最短的和那个接上去的合成一个新的boxH
//然后又继续循环,找最短的
}
}
}
function getminIndex(arr,val) {、
//这里为什么从i=0开始
//是因为要计算前面有几个盒子
//如果i等于1会比实际情况多一个盒子
for(var i=0;i<arr.length;i++){
if(arr[i]===val){
return i;
}
}
}
function $(id) {
return document.getElementById(id);
}