Web-Frontend
js-Tutorial
Detaillierte Erläuterung der Schritte zur Implementierung des Wasserfall-Flow-Layouts mit Ajax (mit Code)
Detaillierte Erläuterung der Schritte zur Implementierung des Wasserfall-Flow-Layouts mit Ajax (mit Code)
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>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 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;
}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;
?>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älleDetaillierte Erläuterung der Verwendung der AJAX-AnfragewarteschlangeDas 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
So machen Sie Google Maps zur Standardkarte im iPhone
Apr 17, 2024 pm 07:34 PM
Die Standardkarte auf dem iPhone ist Maps, Apples proprietärer Geolokalisierungsanbieter. Obwohl die Karte immer besser wird, funktioniert sie außerhalb der Vereinigten Staaten nicht gut. Im Vergleich zu Google Maps hat es nichts zu bieten. In diesem Artikel besprechen wir die möglichen Schritte, um Google Maps als Standardkarte auf Ihrem iPhone zu nutzen. So machen Sie Google Maps zur Standardkarte auf dem iPhone. Das Festlegen von Google Maps als Standardkarten-App auf Ihrem Telefon ist einfacher als Sie denken. Befolgen Sie die nachstehenden Schritte – Erforderliche Schritte – Sie müssen Gmail auf Ihrem Telefon installiert haben. Schritt 1 – Öffnen Sie den AppStore. Schritt 2 – Suchen Sie nach „Gmail“. Schritt 3 – Klicken Sie auf neben der Gmail-App
Schritte zum Upgrade auf die neueste Version von WeChat (Beherrschen Sie die Upgrade-Methode auf die neueste Version von WeChat ganz einfach)
Jun 01, 2024 pm 10:24 PM
WeChat ist eine der Social-Media-Plattformen in China, die ständig neue Versionen herausbringt, um ein besseres Benutzererlebnis zu bieten. Ein Upgrade von WeChat auf die neueste Version ist sehr wichtig, um mit Familie und Kollegen in Kontakt zu bleiben, mit Freunden in Kontakt zu bleiben und über die neuesten Entwicklungen auf dem Laufenden zu bleiben. 1. Verstehen Sie die Funktionen und Verbesserungen der neuesten Version. Es ist sehr wichtig, die Funktionen und Verbesserungen der neuesten Version zu verstehen, bevor Sie WeChat aktualisieren. Für Leistungsverbesserungen und Fehlerbehebungen können Sie sich über die verschiedenen neuen Funktionen der neuen Version informieren, indem Sie die Update-Hinweise auf der offiziellen WeChat-Website oder im App Store lesen. 2. Überprüfen Sie die aktuelle WeChat-Version. Bevor wir WeChat aktualisieren, müssen wir die derzeit auf dem Mobiltelefon installierte WeChat-Version überprüfen. Klicken Sie, um die WeChat-Anwendung „Ich“ zu öffnen, und wählen Sie dann das Menü „Über“ aus, in dem Sie die aktuelle WeChat-Versionsnummer sehen können. 3. Öffnen Sie die App
Diese Apple-ID wird im iTunes Store noch nicht verwendet: Fix
Jun 10, 2024 pm 05:42 PM
Wenn Sie sich mit der AppleID beim iTunesStore anmelden, wird möglicherweise die Fehlermeldung „Diese AppleID wurde nicht im iTunesStore verwendet“ auf dem Bildschirm angezeigt. Es gibt keine Fehlermeldungen, über die Sie sich Sorgen machen müssen. Sie können sie beheben, indem Sie diese Lösungssätze befolgen. Fix 1 – Lieferadresse ändern Der Hauptgrund, warum diese Aufforderung im iTunes Store erscheint, ist, dass Sie nicht die richtige Adresse in Ihrem AppleID-Profil haben. Schritt 1 – Öffnen Sie zunächst die iPhone-Einstellungen auf Ihrem iPhone. Schritt 2 – AppleID sollte über allen anderen Einstellungen stehen. Also, öffnen Sie es. Schritt 3 – Öffnen Sie dort die Option „Zahlung & Versand“. Schritt 4 – Bestätigen Sie Ihren Zugang mit Face ID. Schritt
Shazam-App funktioniert nicht auf dem iPhone: Fix
Jun 08, 2024 pm 12:36 PM
Haben Sie Probleme mit der Shazam-App auf dem iPhone? Shazam hilft Ihnen, Lieder zu finden, indem Sie sie anhören. Wenn Shazam jedoch nicht richtig funktioniert oder den Song nicht erkennt, müssen Sie den Fehler manuell beheben. Die Reparatur der Shazam-App wird nicht lange dauern. Befolgen Sie also, ohne noch mehr Zeit zu verlieren, die folgenden Schritte, um Probleme mit der Shazam-App zu beheben. Fix 1 – Deaktivieren Sie die Funktion für fetten Text. Fetter Text auf dem iPhone kann der Grund dafür sein, dass Shazam nicht richtig funktioniert. Schritt 1 – Sie können dies nur über Ihre iPhone-Einstellungen tun. Also, öffnen Sie es. Schritt 2 – Als nächstes öffnen Sie dort die Einstellungen „Anzeige & Helligkeit“. Schritt 3 – Wenn Sie feststellen, dass „Fetttext“ aktiviert ist
Detaillierte Erläuterung der Schritte zum Erhalten von Win11-Systemadministratorberechtigungen
Mar 08, 2024 pm 09:09 PM
Windows 11 erfreut sich als neuestes von Microsoft eingeführtes Betriebssystem großer Beliebtheit bei den Nutzern. Bei der Verwendung von Windows 11 müssen wir manchmal Systemadministratorrechte erlangen, um einige Vorgänge ausführen zu können, für die Berechtigungen erforderlich sind. Als Nächstes stellen wir die Schritte zum Erlangen von Systemadministratorrechten in Windows 11 im Detail vor. Der erste Schritt besteht darin, auf „Startmenü“ zu klicken. Sie können das Windows-Symbol in der unteren linken Ecke sehen. Klicken Sie auf das Symbol, um das „Startmenü“ zu öffnen. Suchen Sie im zweiten Schritt nach „
iPhone-Screenshots funktionieren nicht: So beheben Sie das Problem
May 03, 2024 pm 09:16 PM
Die Screenshot-Funktion funktioniert auf Ihrem iPhone nicht? Das Erstellen eines Screenshots ist sehr einfach, da Sie nur die Lauter-Taste und die Ein-/Aus-Taste gleichzeitig gedrückt halten müssen, um den Bildschirm Ihres Telefons anzuzeigen. Es gibt jedoch auch andere Möglichkeiten, Frames auf dem Gerät zu erfassen. Fix 1 – Assistive Touch verwenden Machen Sie einen Screenshot mit der Assistive Touch-Funktion. Schritt 1 – Gehen Sie zu Ihren Telefoneinstellungen. Schritt 2 – Tippen Sie als Nächstes auf, um die Barrierefreiheitseinstellungen zu öffnen. Schritt 3 – Öffnen Sie die Touch-Einstellungen. Schritt 4 – Öffnen Sie als Nächstes die Assistive Touch-Einstellungen. Schritt 5 – Aktivieren Sie Assistive Touch auf Ihrem Telefon. Schritt 6 – Öffnen Sie „Hauptmenü anpassen“, um darauf zuzugreifen. Schritt 7 – Jetzt müssen Sie nur noch eine dieser Funktionen mit der Bildschirmaufnahme verknüpfen. Klicken Sie also auf das erste
Uhr-App fehlt im iPhone: So beheben Sie das Problem
May 03, 2024 pm 09:19 PM
Fehlt die Uhr-App auf Ihrem Telefon? Datum und Uhrzeit werden weiterhin in der Statusleiste Ihres iPhones angezeigt. Ohne die Uhr-App können Sie jedoch die Weltzeituhr, die Stoppuhr, den Wecker und viele andere Funktionen nicht nutzen. Daher sollte die Reparatur der fehlenden Uhr-App ganz oben auf Ihrer To-Do-Liste stehen. Diese Lösungen können Ihnen bei der Lösung dieses Problems helfen. Lösung 1 – Platzieren Sie die Uhr-App. Wenn Sie versehentlich die Uhr-App von Ihrem Startbildschirm entfernt haben, können Sie die Uhr-App wieder an ihrem Platz platzieren. Schritt 1 – Entsperren Sie Ihr iPhone und wischen Sie nach links, bis Sie zur Seite „App-Bibliothek“ gelangen. Schritt 2 – Suchen Sie als Nächstes im Suchfeld nach „Uhr“. Schritt 3 – Wenn Sie unten in den Suchergebnissen „Uhr“ sehen, halten Sie die Taste und gedrückt
Problem mit dem Safari-Zoom auf dem iPhone: Hier ist die Lösung
Apr 20, 2024 am 08:08 AM
Wenn Sie in Safari keine Kontrolle über die Zoomstufe haben, kann es schwierig sein, Dinge zu erledigen. Wenn Safari also verkleinert aussieht, könnte das ein Problem für Sie sein. Hier sind einige Möglichkeiten, wie Sie dieses geringfügige Zoomproblem in Safari beheben können. 1. Cursorvergrößerung: Wählen Sie in der Safari-Menüleiste „Anzeige“ > „Cursorvergrößerung“. Dadurch wird der Cursor auf dem Bildschirm besser sichtbar und lässt sich einfacher steuern. 2. Bewegen Sie die Maus: Das hört sich vielleicht einfach an, aber manchmal kann es passieren, dass durch einfaches Bewegen der Maus an eine andere Stelle auf dem Bildschirm automatisch die normale Größe wiederhergestellt wird. 3. Verwenden Sie Tastaturkürzel. Fix 1 – Zoomstufe zurücksetzen Sie können die Zoomstufe direkt über den Safari-Browser steuern. Schritt 1 – Wenn Sie sich in Safari befinden
