1. 程式人生 > >瀑布流佈局ajax外掛使用

瀑布流佈局ajax外掛使用

目的:利用ajax外掛做一個瀑布流的佈局,熟悉ajax的使用。

效果圖:


原理:

圖片塊的插入方式


載入第二頁資料的時機判斷


用到的工具:

1. H5Builder

2.WampServer(用於建立本地伺服器)

佈局樣式部分:

	<body>
		<div class="box">
			<ul id="ul1">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.box {
				width: 1000px;
				height: 2000px;
				margin: 50px auto;
				background: #212121;
			}
			
			ul {
				width: 100%;
			}
			
			li {
				float: left;
				width: 250px;
			}
			
			div {
				width: 96%;
				padding: 2%;
				background: #808080
			}
			
			div img {
				width: 100%;
			}


準備檔案:

1.ajax.js

function ajax(method, url, data, success) {
	var xhr = null;
	try {
		xhr = new XMLHttpRequest();
	} catch (e) {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	
	if (method == 'get' && data) {
		url += '?' + data;
	}
	
	xhr.open(method,url,true);
	if (method == 'get') {
		xhr.send();
	} else {
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		xhr.send(data);
	}
	
	xhr.onreadystatechange = function() {
		
		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
				success && success(xhr.responseText);
			} else {
				alert('出錯了,Err:' + xhr.status);
			}
		}
		
	}
}

2.getPics.php(資料檔案介面)

<?php
header('Content-type:text/html; charset="utf-8"');

/*
API:
	getPics.php

		引數
		cpage : 獲取資料的頁數
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>


編寫js函式:
		<script src="ajax.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				var aLi = oUl.getElementsByTagName('li');
				var iPage = 1;
				var b = true;//設定一個引數用於判斷是否載入更多的頁面資料
				getList();

				//獲取圖片列表資料與插入
				function getList() {
					ajax('get', 'getPics.php', 'cpage=' + iPage, function(data) {
						var arr = JSON.parse(data);
						
						for(var i=0;i<arr.length;i++){
							var _index=getShort();
							var oDiv=document.createElement('div');
							var oImg=document.createElement('img');
							oImg.src=arr[i].preview;
							oImg.style.width='200px';
							oImg.style.height=arr[i].height*(200/arr[i].width)+'px';
							oDiv.appendChild(oImg);
							var oP=document.createElement('p');
							oP.innerHTML=arr[i].title;
							oDiv.appendChild(oP);
							aLi[_index].appendChild(oDiv);
						}
						
						if(!arr.lenth){
							return;
						}
						
						b=true;
					})
				}
				
				//當滾動至底部時候載入更多的資料
				window.onscroll=function(){
					var _index=getShort();
					var oLi=aLi[_index];
					var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
					if(getTop(oLi)+oLi.offsetHeight<document.documentElement.clientHeight+scrollTop){
						if(b){
							b=false;
							iPage++;
							getList();
						}
					}
				}
				
				//取得最短的圖片
				function getShort(){
					var index=0;
					var ih=aLi[index].offsetHeight;
					for(var i=1;i<aLi.length;i++){
						if(aLi[i].offsetHeight<ih){
							index=i;
							ih=aLi[i].offsetHeight;
						}
					}
					return index;
				}
				
				//獲取當前內容的最高高度
				function getTop(obj){
					var iTop=0;
					while(obj){
						iTop+=obj.offsetTop;
						obj=obj.offsetParent;
					}
					return iTop;
				}
			}
		</script>