瀑布流实现学习心得
html部分
css部分
/All Tags/
*{
margin:0;
padding:0;
border:none;
}
body{
background:#ddd;
}
img{
border: none;
}
a{
text-decoration: none;
color:#444;
}
a:hover{
color: #999;
}
.warp{
position: relative;
width: auto;
height:auto;
margin:0 auto;
}
.warp > div{
float: left;
box-sizing: border-box;
width:280px;
height: auto;
margin:10px;
padding:10px;
border-radius:5px;
background:#fff;
}
.warp >div >img{
width:100%;
}
.warp >div >a{
display: block;
font-size:18px;
font-weight:bold;
line-height: 40px;
text-align:center;
}
js部分
//js实现瀑布流
//模拟数据，json格式
var data=[
{
"src":"1.png",
"title":"我是十八怪"
},
{
"src":"2.png",
"title":"我是十八怪"
},
{
"src":"3.png",
"title":"我是十八怪"},
{
"src":"4.png",
"title":"我是十八怪"
},
{
"src":"5.png",
"title":"我是十八怪"
},
{ "src":"6.png",
"title":"我是十八怪"
},
{
"src":"7.png",
"title":"我是十八怪"
},
{
"src":"8.png",
"title":"我是十八怪"
},
{
"src":"9.png",
"title":"我是十八怪"
},
{
"src":"10.png",
"title":"我是十八怪"
},
{
"src":"11.png",
"title":"我是十八怪"
},
{
"src":"12.png",
"title":"我是十八怪"
},
{
"src":"13.png",
"title":"我是十八怪"
},
{
"src":"14.png",
"title":"我是十八怪"
},
{
"src":"15.png",
"title":"我是十八怪"
},
{
"src":"16.png",
"title":"我是十八怪"
},
{
"src":"17.png",
"title":"我是十八怪"
},
{
"src":"18.png",
"title":"我是十八怪"
}]
//瀑布流函数
function waterfall(boxes,warp){
//获取图片盒子的宽度
var boxWidth=boxes[0].offsetWidth+20;
//获取浏览器客户化宽度（这个宽度是动态变化的,随着浏览器窗口的大小变化）
var bodyWidth=document.documentElement.clientWidth;
//规定每一行可以存放的图片盒子的列数，不足一列，向上取整
var col=Math.floor(bodyWidth/boxWidth);
//外层父容器的宽度，设置后结合之前的CSS设置，可以让warp父盒子左右居中
warp.style.width=boxWidth*col+'px';
//将每一个图片盒子的高度放进一个数组,并找到这个数组中最小高度和最小高度所在的数组索引
//新建一个数组
var everyHeight=new Array();
//循环将图片盒子的高度赋值给数组
for(var i=0;i//设置样式函数
var getBoxNumber=0;
function setStyle(box,index,left,top){
//通过赋值刷新操作，得到上一次设置样式的盒子的索引值getBoxNumber，
//判断当前需要设置样式的盒子的索引是否大于等于getBoxNumber，
//从而减少每次调用瀑布流函数时，因WRAP盒子里div盒子的追加，重复刷新之前设置样式定位的盒子
//需要注意函数传参，各参数的准确性和上个瀑布流函数的变量值是否能正确传进来
if(index>=getBoxNumber){
box.style.position='absolute';
box.style.left=left;
box.style.top=top;
//刷新getBoxNumber的值，得到已经设置好定位的盒子索引，并与后续进来的盒子索引作比较，以便判断是否设置定位样式
getBoxNumber=index;
}else{
return false;
}}
//获取数组高度索引函数
function getIndex(arr,height){
//循环遍历数组，找到数组中高度最小值的索引返回
for(var index in arr){
if (arr[index]==height) {
return index;
}
}}
//追加时机判断
function addStart(){
//获取文档滚动的高度，scrollTop经测试表示为滚动条滚动时，文档内容移动的高度，非滚动条移动的高度
//为了兼容性，需要携程如下形式，否则有可能获取的值一直是0
var scrollInstance=document.body.scrollTop||document.documentElement.scrollTop;
//获取文档高度，clientHeight表示当前可视窗口文档的高度，不包括浏览器的菜单，滚动条的高度
//当不明确这些属性值得含义时，最好的方式是去测试
var documentHeight=document.body.offsetHeight||document.documentElement.clientHeight;
//获取最后一个盒子的高度，因为要找到最后一个盒子，此函数没有传参，需要重新获取盒子的DOM对象
var boxes=document.getElementsByClassName('box');
//获取最后一个盒子的高度，offsetHeight的含义是盒子上下外边框之间的距离，需要加上外边距才是盒子的高度
var lastHeight=boxes[boxes.length-1].offsetHeight+20;
//获取最后一个盒子的top值，offsetTop官方含义是盒子边框左上角顶点到其父元素边框左上角顶点的垂直偏移量
var lastTop=boxes[boxes.length-1].offsetTop-10;
//当文档高度+滚动条高度大于最后一个盒子的高度+最后一盒子的TOP值，才开始追加
if (documentHeight+scrollInstance>=lastTop+lastHeight) {
return true;
}else{
return false;
}}
//追加盒子函数
function appendBox(warp){
//循环遍历数组data数据，每一次添加一个div盒子，并更新容器WRAP
for(var i in data){
var stringData='
warp.innerHTML+=stringData;
}//console.log(warp);
//调用瀑布流函数,warp容易里的盒子因追加后数量更新，需重新获取Dom对象，此处不能使用boxes
waterfall(warp.getElementsByTagName('div'),warp);
}
//主函数
window.onload=function(){
//获取容器和盒子的DOM对象
var warp=document.getElementById('warp');
var boxes=warp.getElementsByTagName('div');
//调用瀑布流函数
waterfall(boxes,warp);
//绑定滚动条事件。
document.onscroll=function(){
//监听滚动条位置，当追加函数返回为真时，才开始追加
if(addStart()){
//调用追加函数
appendBox(warp,boxes);
}}
}
效果图：
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4604/viewspace-2801340/ ，如需转载，请注明出处，否则将追究法律责任。
