js瀑布流滾動無限載入（路徑需要修改）

叼子發表於2017-02-12
JS

http://www.shsay.com 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>原生js實現瀑布流</title>
	<style type="text/css">
	body{
		overflow: scroll;
		height: 1000px;
	}
		*{
			margin: 0;
			padding: 0;
		}
		#main{
			position: relative;
		}
		.box{
			padding: 15px 0 0 15px;
			float: left;
		}
		.pic{
			padding: 10px;
			border:1px solid #CCC;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
		}
		.pic img{
			width: 165px;
			height: auto;
		}
	</style>
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic">
				<img src="images/1.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/2.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/3.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/4.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/5.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/6.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/7.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/8.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/9.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/10.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/9.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/8.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/7.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/6.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/5.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/4.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/3.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/2.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/1.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/5.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/6.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/7.jpg">
			</div>
		</div>
				<div class="box">
			<div class="pic">
				<img src="images/8.jpg">
			</div>
		</div>
	</div>


	<script type="text/javascript">
	window.onload=function(){
		waterfall('main','box');
		var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'}]}
		//滾動新增
		window.onscroll=function(){
			if(checkScrollSlide()){
				var oParent=document.getElementById('main')
				//將資料庫渲染到當前頁面的尾部
				for(var i=0;i<dataInt.data.length;i++){
					var oBox=document.createElement('div');
					oBox.className='box';
					oParent.appendChild(oBox);
					var oPic=document.createElement('div');
					oPic.className='pic';
					oBox.appendChild(oPic);
					var oImg=document.createElement('img');
					oImg.src="images/"+dataInt.data[i].src;
					oPic.appendChild(oImg);
				}
				waterfall('main','box');
			}
		}
	}
	function waterfall(parent,box){
		//將main下的所有class為box的元素取出來
		var oParent=document.getElementById(parent);
		var oBoxs=getByClass(oParent,box);
		//計算整個頁面的顯示雷氏（頁面/box的寬）
		var oBoxW=oBoxs[0].offsetWidth;
		var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
		//console.log(cols);
		//設定main的寬
		oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';		
		var hArr=[];//存放每一列高度
		for(var i=0;i<oBoxs.length;i++){
			if(i<cols){
				hArr.push(oBoxs[i].offsetHeight);
			}
			else{
				var minH=Math.min.apply(null,hArr);
				var index=getMinhIndex(hArr,minH);
				oBoxs[i].style.position="absolute";
				oBoxs[i].style.top=minH+'px';
				oBoxs[i].style.left=oBoxW*index+'px';
				hArr[index]+=oBoxs[i].offsetHeight;
			}
		}
	}

	//根據Class獲取元素
	function getByClass(parent,clsName){
		var boxArr=new Array(),//用來儲存獲取到的所有class為Box的元素
			oElements=parent.getElementsByTagName('*');
		for(var i=0;i<oElements.length;i++){
			if (oElements[i].className==clsName) {
				boxArr.push(oElements[i]);
			}
		}
		return boxArr;
	}
	function getMinhIndex(arr,val){
		for(var i in arr){
			if(arr[i]==val){
				return i;
			}
		}

	}

	//檢測是否具備了滾動條件
	function checkScrollSlide(){
		var oParent=document.getElementById('main');
		var oBoxs=getByClass(oParent,'box');
		var lastBoxH=oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
		var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
		var height=document.body.clientHeight || document.documentElement.clientHeight;
		return (lastBoxH<scrollTop+height)?true:false;
	}
	</script>
</body>
</html>

 

相關文章