폭포 흐름 효과 - 스크롤 무한 로드

잔말 말고 코드로 해!

	
	
	
	


	

	
		$(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;
					}
				});
			}

		});
		
	

원리:
    1.모든 그림을 미리 불러오기
    2.그림 불러오기 완료 여부를 판단합니다
    3.용기 너비와 상자 너비를 계산하여 열수를 계산하다
    4.첫 줄에 불러올지 여부를 판단하고, 만약 그렇다면 바로 배열합니다
    5.만약 첫 줄이 아니라면, 각 열의 높이를 판단하고, 최소 높이를 계산하여, 다음 상자를 높이가 가장 작은 열에 위치시켜, 최소 높이를 업데이트합니다
    6.끝까지 불러올지 여부를 판단하고, 만약 그렇다면, 첫 번째 단계로 돌아가 무한 불러오기를 실현한다.