原生JavaScript+LESS实现瀑布流
HTML(注意包裹关系,方便js调用)
<body>
<divid="main">
<divclass="box">
<divclass="pic">
<imgsrc="images/0.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/1.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/2.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/4.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/2.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/4.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/5.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/6.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/7.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/4.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/5.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/4.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/5.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/6.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/7.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
</div>
</body>
LESS(less预编译)
*{
margin:0;
padding:0;
}
#main{
position:relative;
}
.box{
padding:15px0015px;
float:left;
}
.pic{
padding:10px;
border:1pxsolid#ccc;
border-radius:5px;
box-shadow:0px0px5px#ccc;
img{
width:165px;
height:auto;
}
}
JavaScript(自己理解的注解)
(函数存在一定瑕疵,仅用于学习理解)
window.onload=function(){
waterfall("main","box");
//调用自定义函数;作用于main下的每一个box元素;
vardataInt={"data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
//模拟json数据;
window.onscroll=function(){
if(checkScrollSlide){
//调用自定义函数;根据函数返回值确定滚动是否超出范围;
varoParent=document.getElementById("main");
for(vari=0;i<dataInt.data.length;i++){
varoBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
//创建box块
varoPic=document.createElement("div");
oPic.className="pic";
oBox.appendChild(oPic);
//创建pic块
varoImg=document.createElement("img");
//创建img元素
oImg.src="images/"+dataInt.data[i].src;
//设置图片引用;
oPic.appendChild(oImg);
};
waterfall("main","box");
//将动态生成的数据块进行流式布局;
};
};
};
//流式布局主函数,自动调整数据块的位置;
functionwaterfall(parent,box){
//将main下的所有box元素取出;"parent"代表父级,box代表box元素;
varoParent=document.getElementById(parent);
//将父级元素赋值给变量oParent;
varoBoxs=getByClass(oParent,box);
//通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;
//再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);
//console.log(oBoxs.length);
//在控制台中打印出box元素的数量,用于调试;
varoBoxW=oBoxs[0].offsetWidth;
//计算出每一列的宽度;offsetWidth包含内边距在内的宽度;
//console.log(oBoxW);测试;
varcols=Math.floor(document.documentElement.clientWidth/oBoxW);
//计算整个页面显示的列数(页面宽/box的宽);
oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0auto";
//父元素main的宽度=每一列的宽*列数;并且左右居中;
varhArr=[];
//存放每一列高度的数组;
for(vari=0;i<oBoxs.length;i++){
//遍历oBoxs数组;
if(i<cols){
//这里符合条件的是第一行的每列的第一个;
hArr.push(oBoxs[i].offsetHeight);
//得出每一列的高度放入数组中;
}else{
//这里的box元素已经不是第一行的元素了;
varminH=Math.min.apply(null,hArr);
//得出第一行的最小高度并赋值给变量;
//console.log(minH);
varindex=getMinhIndex(hArr,minH);
//调用自定义函数获取这个变量的index值;
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxW*index+"px";
//设置当前元素的位置;
//当前元素的left值=顶上的元素的index值*每列的宽度;
//oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
//第二种获取当前元素的left值;
//此时在第index列添加了一个box元素;
hArr[index]+=oBoxs[i].offsetHeight;
//每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;
};
};
};
//js原生通过Class获取元素;
functiongetByClass(parent,claName){
//通过class获取元素;(在父级parent的容器下获取claName的元素;)
varboxArr=newArray();
//声明数组,用来存储获取到的所有class为box的元素;
varoElements=parent.getElementsByTagName("*")
//声明变量用来存储此父元素下的所有子元素(*);
for(vari=0;i<oElements.length;i++){
//遍历数组oElements;
if(oElements[i].className==claName){
//如果数组中的某一个元素的calss类与参数claName相同;
boxArr.push(oElements[i]);
//则把遍历到的这个box元素归类到boxArr数组;
};
};
returnboxArr;
//调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;
};
//获取数组元素的index值;
functiongetMinhIndex(arr,val){
//arr是父级数组;val是当前元素;
for(variinarr){
//从0开始遍历;
if(arr[i]==val){
//找到当前元素在数组中对应的index值;
returni;
//函数返回值即是当前元素的index值;
};
};
};
//检测是否具备了滚动加载数据块的条件;
functioncheckScrollSlide(){
varoParent=document.getElementById("main");
varoBoxs=getByClass(oParent,"box");
varlastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;
varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//浏览器滚动条滚动的距离;
//console.log(scrollTop);
varheight=document.body.clientHeight||document.documentElement.clientHeight;
//浏览器视口的高度;
//console.log(height);
return(lastBoxH<scrollTop+height)?true:false;
//页面滚动的距离是否大于最后一个box元素的offsetTop;
};
总结：
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。
然后进入下一个循环插入下一行。