AJAX implementiert das Wasserfall-Flow-Layout
- 高洛峰Original
- 2017-01-03 10:39:031254Durchsuche
Wasserfallfluss ist derzeit eine beliebte Methode für das Layout der Website-Oberfläche. Das ungleichmäßige mehrspaltige Layout und das automatische Laden beim Erreichen des unteren Endes verbessern die visuelle und Benutzererfahrung der Website erheblich. 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, daher werde ich hier nicht näher darauf eingehen. Die Implementierungsmethode für den Wasserfallfluss in diesem Artikel ist ein vierspaltiges Layout (li*4), und jedes Bild ist ein Feld (div>img+p). Nach dem Lesen der Daten aus dem Hintergrund werden sie 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 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-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);
}
}
}
}Der Ajax-Teil 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);
//将数据写入到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;
}Die Funktion dieses Teils besteht hauptsächlich darin, das generierte Div dynamisch auf die Seite zu schreiben, was die Änderung des Boxstils und das Schreiben von Daten umfasst. Die Daten werden vom Server über die Ajax-Funktion abgerufen.
Es ist zu beachten, dass der Betrieb dieser Instanz vom Server abhängt. Sie müssen daher einen einfachen Server lokal erstellen. Sie können WampService verwenden, um ihn schnell zu erstellen.
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;
?>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein Ich hoffe auch, dass jeder PHP-Chinesisch unterstützt.
Weitere Artikel zur AJAX-Implementierung des Wasserfall-Flow-Layouts finden Sie auf der chinesischen PHP-Website!