Wasserfall-Flow-Layout und unendlich ladender Bilderalbum-Effekt
Mar 22, 2018 pm 03:18 PM
Dieses Mal pr?sentiere ich Ihnen das Wasserfall-Flow-Layout und den Effekt des unbegrenzten Ladens von Fotoalben. Was sind die Vorsichtsma?nahmen, um den Effekt des Wasserfall-Flow-Layouts und des unbegrenzten Ladens von zu implementieren? Hier ist die tats?chliche Praxis.
Inhaltsverzeichnis
1. Der Seitencode pic1.html lautet wie folgt:
2 Der Code der Entit?tsklasse Photoes.cs, der Datenbankdaten simuliert, lautet wie folgt:
3. Der allgemeine Handler-Code Handler1.ashx für den Server zur Rückgabe von Daten an den Client lautet wie folgt:
4. Beispiel-Download:
5. Erfahren Sie mehr über Wasserfall-Fluss-Layout
Zun?chst m?chte ich Ihnen die Wirkung des Wasserfall-Fluss-Layouts und des unendlich ladenden Bilderalbums zeigen:
1 . Der Seitencode pic1.html lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
????<meta charset="UTF-8">
????<title>瀑布流布局與無限加載圖片相冊</title>
????<style type="text/css">
????????*?{
????????????margin:?0;
????????????padding:?0;
????????}
????????body?{
????????????background:?url(../img/bg5.jpg);
????????}
????????#items?{
????????????width:?1060px;
????????????margin:?0?auto;
????????????border:?1px?solid?lightpink;
????????}
????????.item?{
????????????border:?1px?solid?lightpink;
????????????width:?200px;
????????????color:?purple;
????????????font-size:?30px;
????????????font-weight:?bolder;
????????????margin:?5px;
????????????text-align:?center;
????????????opacity:?0.8;
????????}
????????img?{
????????????width:?200px;
????????}
????</style>
</head>
<body>
????<p id="items">
????????<p class="item"><img src="img/1.jpg" />picture-1</p>
????????<p class="item"><img src="img/2.jpg" />picture-2</p>
????????<p class="item"><img src="img/3.jpg" />picture-3</p>
????????<p class="item"><img src="img/4.jpg" />picture-4</p>
????????<p class="item"><img src="img/5.jpg" />picture-5</p>
????????<p class="item"><img src="img/6.jpg" />picture-6</p>
????????<p class="item"><img src="img/7.jpg" />picture-7</p>
????????<p class="item"><img src="img/8.jpg" />picture-8</p>
????????<p class="item"><img src="img/9.jpg" />picture-9</p>
????????<p class="item"><img src="img/10.jpg" />picture-10</p>
????????<p class="item"><img src="img/11.jpg" />picture-11</p>
????????<p class="item"><img src="img/12.jpg" />picture-12</p>
????????<p class="item"><img src="img/13.jpg" />picture-13</p>
????????<p class="item"><img src="img/14.jpg" />picture-14</p>
????????<p class="item"><img src="img/15.jpg" />picture-15</p>
????????<p class="item"><img src="img/16.jpg" />picture-16</p>
????????<p class="item"><img src="img/17.jpg" />picture-17</p>
????????<p class="item"><img src="img/18.jpg" />picture-18</p>
????????<p class="item"><img src="img/19.jpg" />picture-19</p>
????????<p class="item"><img src="img/20.jpg" />picture-20</p>
????</p>
????<a href="Handler1.ashx" id="next">下一頁</a>
????<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
????<!--插件的引用-->
????<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
????<script src="js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
????<script src="js/jquery.infinitescroll.min.js"></script>
????<script>
????????//此方法用來初始化圖片（圖片全部加載完成時調(diào)用）
????????var?init?=?function?()?{
????????????imagesLoaded(document.querySelector('#items'),?function?(instance)?{
????????????????//此方法用來設(shè)置瀑布流布局
????????????????var?msnry?=?new?Masonry("#items",?{
????????????????????itemSelector:?".item",
????????????????????columnWidth:?0?//列與列之間的寬度
????????????????});
????????????????//alert('所有的圖片都加載完成了');
????????????});
????????}
????????init();
????????var?num?=?0;
????????//此方法是無限加載的方法
????????$("#items").infinitescroll({
????????????navSelector:?"#next",
????????????nextSelector:?"a#next",
????????????itemSelector:?".item",
????????????debug:?true,
????????????dataType:?"json",
????????????maxPage:?10,
????????????appendCallback:?false,
????????????path:?function?(index)?{
????????????????console.log(index);
????????????????return?"Handler1.ashx?page="?+?index;
????????????}
????????},?function?(data)?{
????????????num?-=?20;
????????????for?(var?i?=?0;?i?< data.length; i++) {
$("<p class='item'><img src='img/" + (data[i].imgUrl + num) + ".jpg' />"?+?data[i].Name?+?"</p>").appendTo("#items")
????????????????console.log(data[i].imgUrl?+?"--"?+?data[i].Name);
????????????}
????????????init();
????????});
????</script>
</body>
</html>
2 Der Code der Entit?tsklasse Photoes.cs zum Simulieren von Datenbankdaten lautet:
using?System;
using?System.Collections.Generic;
using?System.Linq;
using?System.Web;
namespace?瀑布流布局與無限加載圖片相冊
{
????public?class?Photoes
????{
????????public?int?imgUrl?{?get;?set;?}
????????public?string?Name?{?get;?set;?}
????????//模擬數(shù)據(jù)庫有兩百條數(shù)據(jù)
????????public?static?List<Photoes>?GetData()
????????{
????????????List<Photoes>?list?=?new?List<Photoes>();
????????????Photoes?pic?=?null;
????????????for?(int?i=?21;?i?<=200; i++)
{
pic = new Photoes();
pic.imgUrl = i;
pic.Name = "Picture-" + i;
list.Add(pic);
}
return list;
}
}
}3. Der allgemeine Handler-Code Handler1.ashx für den Server zur Rückgabe von Daten an den Client lautet wie folgt:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace 瀑布流布局與無限加載圖片相冊
{
/// <summary>
????///?服務(wù)器返回數(shù)據(jù)給客戶端的一般處理程序
????///?</summary>
????public?class?Handler1?:?IHttpHandler
????{
????????public?void?ProcessRequest(HttpContext?context)
????????{
????????????context.Response.ContentType?=?"text/plain";
????????????List<Photoes>?result?=?Photoes.GetData();
????????????int?pageIndex?=?Convert.ToInt32(context.Request["page"]);
????????????var?filtered?=?result.Where(p?=>?p.imgUrl?>=?pageIndex?*?20?-?19?&&?p.imgUrl?<=?pageIndex?*?20).ToList();
????????????JavaScriptSerializer?ser?=?new?JavaScriptSerializer();
????????????string?jsonData?=?ser.Serialize(filtered);
????????????context.Response.Write(jsonData);
????????}
????????public?bool?IsReusable
????????{
????????????get
????????????{
????????????????return?false;
????????????}
????????}
????}
}
Zusammenfassung: Ich habe vor einiger Zeit etwas über das Wasserfall-Flusslayout und das Laden von Bildern gelernt und ein einfaches Beispiel gemacht, in der Hoffnung, das gelernte Wissen zu festigen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
CSS zur Erzielung eines 3D-Schaltfl?cheneffekts
IE-kompatible L?sung für Deckkraft-Transparenzfilter
HTML5+CSS3-Ladefortschrittsbalken und Download-Fortschrittsbalkenimplementierung
Das obige ist der detaillierte Inhalt vonWasserfall-Flow-Layout und unendlich ladender Bilderalbum-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
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)
Wie kann das Problem des automatischen Speicherns von Bildern beim Ver?ffentlichen auf Xiaohongshu gel?st werden? Wo ist das beim Posten automatisch gespeicherte Bild?
Mar 22, 2024 am 08:06 AM
Durch die kontinuierliche Entwicklung der sozialen Medien ist Xiaohongshu zu einer Plattform für immer mehr junge Menschen geworden, auf der sie ihr Leben teilen und sch?ne Dinge entdecken k?nnen. Viele Benutzer haben beim Posten von Bildern Probleme mit der automatischen Speicherung. Wie kann man dieses Problem l?sen? 1. Wie kann das Problem des automatischen Speicherns von Bildern beim Ver?ffentlichen auf Xiaohongshu gel?st werden? 1. Cache leeren Zuerst k?nnen wir versuchen, die Cache-Daten von Xiaohongshu zu l?schen. Die Schritte sind wie folgt: (1) ?ffnen Sie Xiaohongshu und klicken Sie auf die Schaltfl?che ?Mein“ in der unteren rechten Ecke. (2) Suchen Sie auf der pers?nlichen Center-Seite nach ?Einstellungen“ und klicken Sie darauf. (3) Scrollen Sie nach unten und suchen Sie nach ?; Option ?Cache l?schen“. Klicken Sie auf ?OK“. Nachdem Sie den Cache geleert haben, geben Sie Xiaohongshu erneut ein und versuchen Sie, Bilder zu posten, um zu sehen, ob das Problem mit dem automatischen Speichern behoben ist. 2. Aktualisieren Sie die Xiaohongshu-Version, um sicherzustellen, dass Ihr Xiaohongshu
Wie poste ich Bilder in TikTok-Kommentaren? Wo ist der Zugang zu den Bildern im Kommentarbereich?
Mar 21, 2024 pm 09:12 PM
Mit der Beliebtheit von Douyin-Kurzvideos sind die Benutzerinteraktionen im Kommentarbereich bunter geworden. Einige Benutzer m?chten Bilder in Kommentaren teilen, um ihre Meinung oder Gefühle besser auszudrücken. Wie postet man also Bilder in TikTok-Kommentaren? Dieser Artikel beantwortet diese Frage ausführlich und gibt Ihnen einige entsprechende Tipps und Vorsichtsma?nahmen. 1. Wie poste ich Bilder in Douyin-Kommentaren? 1. ?ffnen Sie Douyin: Zuerst müssen Sie die Douyin-App ?ffnen und sich bei Ihrem Konto anmelden. 2. Suchen Sie den Kommentarbereich: Suchen Sie beim Durchsuchen oder Posten eines kurzen Videos die Stelle, an der Sie einen Kommentar abgeben m?chten, und klicken Sie auf die Schaltfl?che ?Kommentieren“. 3. Geben Sie Ihren Kommentarinhalt ein: Geben Sie Ihren Kommentarinhalt in den Kommentarbereich ein. 4. W?hlen Sie, ob Sie ein Bild senden m?chten: In der Benutzeroberfl?che zur Eingabe von Kommentarinhalten sehen Sie eine Schaltfl?che ?Bild“ oder eine Schaltfl?che ?+“. Klicken Sie darauf
So lassen Sie PPT-Bilder einzeln erscheinen
Mar 25, 2024 pm 04:00 PM
In PowerPoint ist es eine g?ngige Technik, Bilder einzeln anzuzeigen, was durch das Festlegen von Animationseffekten erreicht werden kann. In dieser Anleitung werden die Schritte zur Implementierung dieser Technik detailliert beschrieben, einschlie?lich der grundlegenden Einrichtung, des Einfügens von Bildern, des Hinzufügens von Animationen sowie des Anpassens der Reihenfolge und des Timings der Animationen. Darüber hinaus stehen erweiterte Einstellungen und Anpassungen zur Verfügung, z. B. die Verwendung von Triggern, das Anpassen von Animationsgeschwindigkeit und -reihenfolge sowie die Vorschau von Animationseffekten. Durch Befolgen dieser Schritte und Tipps k?nnen Benutzer ganz einfach Bilder so einrichten, dass sie in PowerPoint nacheinander angezeigt werden, wodurch die visuelle Wirkung der Pr?sentation verbessert und die Aufmerksamkeit des Publikums erregt wird.
6 M?glichkeiten, Bilder auf dem iPhone sch?rfer zu machen
Mar 04, 2024 pm 06:25 PM
Die neuesten iPhones von Apple halten Erinnerungen mit gestochen scharfen Details, S?ttigung und Helligkeit fest. Manchmal kann es jedoch zu Problemen kommen, die dazu führen k?nnen, dass das Bild weniger klar aussieht. W?hrend der Autofokus bei iPhone-Kameras gro?e Fortschritte gemacht hat und es Ihnen erm?glicht, schnell Fotos aufzunehmen, kann die Kamera in bestimmten Situationen versehentlich auf das falsche Motiv fokussieren, wodurch das Foto in unerwünschten Bereichen unscharf wird. Wenn Ihre Fotos auf Ihrem iPhone unscharf wirken oder es ihnen insgesamt an Sch?rfe mangelt, soll Ihnen der folgende Beitrag dabei helfen, sie sch?rfer zu machen. So machen Sie Bilder auf dem iPhone klarer [6 Methoden] Sie k?nnen versuchen, Ihre Fotos mit der nativen Foto-App zu bereinigen. Wenn Sie mehr Funktionen und Optionen wünschen
So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder. - So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder
Mar 04, 2024 pm 05:49 PM
Verwenden Sie auch die Foxit PDF Reader-Software? Wissen Sie, wie Foxit PDF Reader PDF-Dokumente in JPG-Bilder konvertiert? Für diejenigen, die sich für die Konvertierungsmethode interessieren jpg-Bilder, kommen Sie bitte vorbei und schauen Sie sich unten um. Starten Sie zun?chst Foxit PDF Reader, suchen Sie dann in der oberen Symbolleiste nach ?Funktionen“ und w?hlen Sie dann die Funktion ?PDF an andere“ aus. ?ffnen Sie als N?chstes eine Webseite namens ?Foxit PDF Online Conversion“. Klicken Sie auf die Schaltfl?che ?Anmelden“ oben rechts auf der Seite, um sich anzumelden, und aktivieren Sie dann die Funktion ?PDF zu Bild“. Klicken Sie dann auf die Schaltfl?che ?Hochladen“ und fügen Sie die PDF-Datei hinzu, die Sie in ein Bild konvertieren m?chten. Klicken Sie nach dem Hinzufügen auf ?Konvertierung starten“.
![Fehler beim Laden des Plugins in Illustrator [Behoben]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Fehler beim Laden des Plugins in Illustrator [Behoben]
Feb 19, 2024 pm 12:00 PM
Erscheint beim Starten von Adobe Illustrator eine Meldung über einen Fehler beim Laden des Plug-Ins? Bei einigen Illustrator-Benutzern ist dieser Fehler beim ?ffnen der Anwendung aufgetreten. Der Meldung folgt eine Liste problematischer Plugins. Diese Fehlermeldung weist darauf hin, dass ein Problem mit dem installierten Plug-In vorliegt, es kann jedoch auch andere Gründe haben, beispielsweise eine besch?digte Visual C++-DLL-Datei oder eine besch?digte Einstellungsdatei. Wenn dieser Fehler auftritt, werden wir Sie in diesem Artikel bei der Behebung des Problems unterstützen. Lesen Sie daher weiter unten weiter. Fehler beim Laden des Plug-Ins in Illustrator Wenn Sie beim Versuch, Adobe Illustrator zu starten, die Fehlermeldung ?Fehler beim Laden des Plug-Ins“ erhalten, k?nnen Sie Folgendes verwenden: Als Administrator
Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden k?nnen? 6 L?sungen
Mar 15, 2024 am 10:30 AM
Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim ?ffnen der Browser-Webseite l?ngere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs L?sungen für das Problem vor, dass Webseitenbilder nicht geladen werden k?nnen. Webseitenbilder k?nnen nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer ge?ffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ gro? M?glicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden k?nnen, liegt das m?glicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.
Stremio-Untertitel funktionieren nicht; Fehler beim Laden der Untertitel
Feb 24, 2024 am 09:50 AM
Untertitel funktionieren bei Stremio auf Ihrem Windows-PC nicht? Einige Stremio-Benutzer berichteten, dass in den Videos keine Untertitel angezeigt wurden. Viele Benutzer berichteten, dass ihnen die Fehlermeldung ?Fehler beim Laden der Untertitel“ angezeigt wurde. Hier ist die vollst?ndige Fehlermeldung, die bei diesem Fehler angezeigt wird: Beim Laden der Untertitel ist ein Fehler aufgetreten. Untertitel konnten nicht geladen werden: Dies k?nnte ein Problem mit dem von Ihnen verwendeten Plugin oder Ihrem Netzwerk sein. Wie in der Fehlermeldung angegeben, k?nnte es Ihre Internetverbindung sein, die den Fehler verursacht. überprüfen Sie daher bitte Ihre Netzwerkverbindung und stellen Sie sicher, dass Ihr Internet ordnungsgem?? funktioniert. Abgesehen davon k?nnte es auch andere Gründe für diesen Fehler geben, darunter ein widersprüchliches Untertitel-Add-on, nicht unterstützte Untertitel für bestimmte Videoinhalte und eine veraltete Stremio-App. wie
