Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Implementierung des AjaxWasserfall-Flow-Layouts (mit Code) bringen. Das Folgende ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf. Wasserfallfluss ist derzeit eine beliebte Methode für das Layout der Website-Oberfläche und die Art und Weise, wie der untere Teil
automatisch geladen wird
, kann die Website optisch und benutzerfreundlich gestalten verbessert. Die erste Person, die dieses Layout verwendete, war die ausländische Bilder-Website Pinterest. Später begannen auch einige inländische Bild-Websites, das Wasserfall-Flow-Layout zu verwenden, darunter Huaban.com, die Bilder-Community Lofter, Meilishuo, Mogujie usw., die diesem ähneln Pinterest. Das Layout des Wasserfallflusses dürfte für die meisten Menschen sehr einfach sein, mit nur wenigen Spalten. Das Wichtigste am Wasserfallfluss ist das asynchrone Laden von Daten.
Lassen Sie uns zunächst über die in diesem Beispiel verwendete Wasserfall-Flow-Methode sprechen. Es gibt viele Möglichkeiten, das Wasserfall-Flow-Layout zu implementieren. Sie können selbst auf Baidu suchen. Ich werde hier nicht näher darauf eingehen. Die Implementierungsmethode des Wasserfallflusses in diesem Artikel ist ein vierspaltiges Layout (li*4). Nach dem Lesen der Daten aus dem Hintergrund wird es den Elementen im zugewiesen Bestimmen Sie die Spalte mit der kleinsten Höhe zu diesem Zeitpunkt (li), fügen Sie dann die Box zur entsprechenden Spalte (li) hinzu und treffen Sie dann die nächste Beurteilung usw., bis alle Daten auf dieser Seite geladen sind.
Codeteil:
html+css
<!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 p{
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>Nach dem Login kopieren
Javascript-Teil: Ajax-Teil und Implementierungsteil
/**
*
* @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);
}
}
}
}Nach dem Login kopieren
Der Ajax-Teil ist im Es ist eine Modifikation des Arbeitsprinzips von Ajax und der einfachen Kapselung zuvor geschriebener Funktionen. Nachdem man das verstanden hat, ist es im Grunde nicht schwer, dies zu erkennen. Im Vergleich zu diesem hat dieser einen weiteren Datenparameter. Daten sind die Seitennummer, die zum Lesen der Daten verwendet wird.
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);
//将数据写入到p中
for(var i = 0; i < data.length; i++) {
var index = getShort(li);//查找最短的li
//创建新的节点：p>img+p
var p = document.createElement('p');
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";
p.appendChild(img);
var p = document.createElement('p');
p.innerHTML = data[i].title;//p获取图片标题
p.appendChild(p);
//加入到最短的li中
li[index].appendChild(p);
}
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;
}Nach dem Login kopieren
Die Funktion dieses Teils besteht hauptsächlich darin, das generierte p dynamisch auf die Seite zu schreiben, einschließlich der Änderung des Boxstils und des Schreibens von Daten. Die Daten werden vom Server über die Ajax-Funktion abgerufen.
Es ist zu beachten, dass der Betrieb dieser Instanz vom Server abhängt. Daher muss zum schnellen Erstellen ein einfacher Server lokal erstellt werden.
Das Folgende ist der PHP-Code unserer Datenquelle:
<?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;
?>Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen achten Sie bitte auf andere verwandte Themen Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der JSONP-Implementierungsprinzipien und -fälle
Detaillierte Erläuterung der Verwendung der AJAX-Anfragewarteschlange
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des Wasserfall-Flow-Layouts mit Ajax (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
