废话不多说,直接上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流-横排</title>
<style>
.container{width: 100%;height: auto;position: relative;}
.clear{clear: both;height: auto;content: "";}
.box{width: 150px;padding: 10px;border:1px solid #C5C3C3;border-radius: 5px;box-shadow: 2px 2px 5px #C8C8C8;margin: 10px;float: left;}
.box img{width: 150px;display: block;}
.box hr{color: #C9C8C8;}
.box span{color: #F57E17;}
</style>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div class="container clear"></div>
<script>
$(function(){
//模拟数据
var jsonData=[
{title:'1',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/1.jpg'},
{title:'2',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/2.jpg'},
{title:'3',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/3.jpg'},
{title:'4',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/7.jpg'},
{title:'5',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/8.jpg'},
{title:'6',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/9.jpg'},
{title:'7',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/10.jpg'},
{title:'8',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/11.jpg'},
{title:'9',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/16.jpg'},
{title:'10',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/17.jpg'},
{title:'11',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/q.jpg'},
{title:'12',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/w.jpg'},
{title:'13',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/cat_3.jpg'},
{title:'14',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/cat_4.jpg'},
{title:'15',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/cat_5.jpg'},
{title:'16',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/e.jpg'},
{title:'17',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/r.jpg'},
{title:'18',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/t.jpg'},
{title:'19',text:'美丽的姑娘,总是在黄昏时分眺望远方',src:'img/y.jpg'}
];
waterFull(jsonData);
function waterFull(jsonData){
//加载全部图片ES6标准。IE不太支持
/*for(var item of jsonData){
var box="<div class='box'><img src='"+item['src']+"'><hr><p>"+item['title']+"</p><span>"+item['text']+"</span></div>";
$('.container').append(box);
}*/
//加载全部如偏ES5标准
for(var index in jsonData){
var box="<div class='box'><img src='"+jsonData[index].src+"'><hr><p>"+jsonData[index].title+"</p><span>"+jsonData[index].text+"</span></div>";
$('.container').append(box);
}
//判断图片是否加载完成,这个非常重要,因为如果图片没有加载完成的话,就无法正确计算每个盒子的高度,在定位上就会有问题
$('img').each(function() {
$(this).load(function(){
loadItem();
});
});
}
var isLoad=true;
$(window).scroll(function(){
//判断是否加载到底部
if($(document).scrollTop() + $(window).height() >= $(document).height()){
isLoad=false;
waterFull(jsonData);
}
});
function loadItem(){
//获取每个子容器box
var items=$('.box');
//获取容器container宽度,每个子容器box宽度,动态计算列数
var containerWidth=$('.container').innerWidth();
var boxWidth=$('.box').eq(0).outerWidth(true);
var column=Math.floor(containerWidth/boxWidth);
var heightArr=[];
$.each(items,function(index,value){
//获取子容器box的高度margin+border+padding+width
var boxHeight=$(value).outerHeight(true);
//console.log(boxHeight);
//判断第一行
if(index<column){
heightArr[index]=boxHeight;
}else{
var minBoxHeight=Math.min.apply(null,heightArr);
var minBoxIndex=$.inArray(minBoxHeight, heightArr);
//console.log(value);
//定位盒子位置
$(value).css({
'position':'absolute',
'top':minBoxHeight+'px',
'left':minBoxIndex*boxWidth+'px'
});
//更新最小高度
heightArr[minBoxIndex]+=boxHeight;
}
});
}
});
</script>
</body>
</html>
原理:
1.预先加载全部图片
2.判断图片是否加载完成
3.通过计算容器宽度与盒子宽度,计算列数
4.判断是否是加载在第一行,如果是就直接排列
5.如果不是第一行,判断每一列的高度,计算最小高度,将下一个盒子定位在高度最小的那一列,更新最小高度
6.判断是否加载到底部,如果是,则回到第一步,实现无限加载