AJAX實現瀑布流佈局

時間 2019-12-05

標籤 ajax 實現瀑布佈局欄目 Ajax 简体版

原文原文鏈接

瀑布流是當前一種比較流行的網站界面佈局方式，良莠不齊的多欄佈局以及到達底部自動加載的方式，使網站在視覺和用戶體驗上都能獲得較大的提高。最先使用此佈局的是國外的圖片網站Pinterest，以後國內的一些圖片網站也開始使用瀑布流佈局，包括和Pinterest相似的花瓣網、圖片社區lofter、美麗說、蘑菇街等等。javascript

瀑布流在佈局上對於大多數人來講應該是很簡單的，比較只有幾列而已。瀑布流最主要的仍是數據的異步加載。php

首先說一下此次實例所用的瀑布流式方法。瀑布流佈局實現的方法不少，具體能夠自行百度，此處再也不贅述。本文中瀑布流實現方法爲四列布局（li*4），每一個圖片爲一個盒子（div>img+p），從後臺讀取數據後賦值給盒子中的元素，斷定此時高度最小的列（li），而後將盒子添加到對應的列（li），以後進行下一次斷定，以此類推，直至本頁全部數據加載完成。css

代碼部分：html

html+cssjava

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流佈局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 1200px;
				margin: 0 auto;
			}
			ul li{
				float: left;
				width: 250px;
				list-style: none;
				margin: 20px;
			}
			ul li div{
				width: 250px;
				margin-bottom: 20px;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 5px;
				box-shadow: 2px 2px 10px #919B9C;
			}
			ul li img{
				width: 100%;
				margin-bottom: 10px;
			}
			ul li p{
				font-family: "microsoft yahei";
				font-size: 14px;
			}
		</style>
		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="pubuliu.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul id="ul1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

javascript部分：ajax部分和實現部分

/**
 * 
 * @param {Object} method get和post方式
 * @param {Object} url 文件路徑
 * @param {Object} data 頁碼
 * @param {Object} success 成功的函數
 */
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);
				console.log(xhr.responseText);
			} else {
				alert('出錯了,Err：' + xhr.status);
			}
		}
		
	}
}

ajax部分是在以前所寫的 Ajax工做原理以及函數的簡單封裝上修改而來，理解那個以後看這個基本沒難度。這個相對那個來講多了一個data參數，data是用來讀取數據的頁碼。

window.onload = function() {
	//獲取界面節點
	var ul = document.getElementById('ul1');
	var li = document.getElementsByTagName('li');
	var liLen = li.length;
	var page = 1;
	var bool = false;
	//調用接口獲取數據
	loadPage();//首次加載
	/**
	 * 加載頁面的函數
	 */
	function loadPage(){
		ajax('get', 'getPics.php', 'cpage='+page, function(data) {
			//將數據庫中獲取的數據轉換成數組形式，這裏要根據數據庫中的數據形式來寫，這裏我獲取到的是json形式
			var data = JSON.parse(data);
			//將數據寫入到div中
			for(var i = 0; i < data.length; i++) {
				var index = getShort(li);//查找最短的li
				//建立新的節點：div>img+p
				var div = document.createElement('div');
				var img = document.createElement('img');
				img.src = data[i].preview;//img獲取圖片地址
				img.alt = "等着吧..."
				//根據寬高比計算img的高，爲了防止未加載時高度過低影響最短Li的判斷
				img.style.height = data[i].height * (230 / data[i].width) + "px";
				div.appendChild(img);
				var p = document.createElement('p');
				p.innerHTML = data[i].title;//p獲取圖片標題
				div.appendChild(p);
				//加入到最短的li中
				li[index].appendChild(div);
			}
			bool = true;//加載完成設置開關，用於後面判斷是否加載下一頁
		});
	}
	
	window.onscroll = function (){
		var index = getShort(li);
		var minLi = li[index];
		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
		
		if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){
			//開關爲開，即上一頁加載完成，才能開始加載
			if(bool){
				bool = false;
				page++;
				loadPage();
			}
		}
	}

}
/**
 * 獲取數組中高度最小的索引
 * @param {Object} li 數組
 */
function getShort(li) {
	var index = 0;
	var liHeight = li[index].offsetHeight;
	for(var i = 0; i < li.length; i++) {
		if(li[i].offsetHeight < liHeight) {
			index = i;
			liHeight = li[i].offsetHeight;
		}
	}
	return index;
}

這部分的功能主要是動態的將生成的div寫入到頁面中，其中包含對盒子樣式的修改和數據的寫入，數據經過ajax函數從服務器端獲取。

須要注意的是：該實例的運行依賴於服務器，因此須要在本地搭建一個簡單的服務器，快速搭建可使用WampService。ajax

下面是咱們數據來源的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;

?>

數據的來源是一個國外的網站服務器，在加載速度上能夠會稍慢。正是由於全部的數據都來源與服務器，因此咱們必需要在本地搭建服務器。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。