瀑布流效果-滚动无限加载

废话不多说，直接上代码！

<!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.判断是否加载到底部，如果是，则回到第一步，实现无限加载

瀑布流效果-滚动无限加载

猜你喜欢