Ich habe die Verwendung von JavaScript durch Lehrer Amy heutzutage gesehen, um den Wasserfallfluss zu implementieren, also habe ich dem Code verfolgt. Ich fand, dass das Schreiben solcher sich nur beim Laden an den Bildschirm anpassen kann, und das Ändern der Fenstergröße kann sich nicht anpassen.
Deshalb dachte ich daran, Fenster zu verwenden.
Die Codekopie lautet wie folgt:
window.onload = function () {
// Wasserfallflussfunktion
Wasserfall ('Inhalt', 'Box');
// Simulieren Sie das Laden von Daten
var dataint = {"Data": [{"Src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr C ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}}
// Wenn sich die Bildschirmgröße ändert, wird die Wasserfallflussfunktion neu angepasst.
window.onResize = function () {
// Wasserfall ('Inhalt', 'Box');
setTimeout (function () {waterfall ('content', 'box');}, 200);
}
window.onscroll = function () {
if (poksCroll ()) {
var outdoor = document.getElementById ('Inhalt');
// Fügen Sie die gefärbten Daten in HTML hinzu
für (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createelement ("div");
obox.className = "box";
Outdoor.AppendChild (OBOX);
var opic = document.createelement ("div");
opic.className = "pic";
Obox.AppendChild (opic);
var oimg = document.createelement ("img");
oimg.src = "img/"+dataint.data [i] .src;
Opic.AppendChild (Oimg);
}
Wasserfall ('Inhalt', 'Box');
}
}
}
Es ist in Ordnung, wenn der Bildschirm reduziert ist, aber aus dem Zoom-In erscheint ein Fehler
Ich habe nicht gesehen, dass die Spitze der nächsten Spalten nicht zurückkommen kann.
Also öffnete ich das Entwicklungsinstrument, um zu sehen, was passiert ist.
Es sollte im 5. Div keinen Stil geben. Es liegt daran, dass es beim Schrumpfen hinzugefügt wurde, aber es wurde vergrößert und es wurde nicht klar, so dass es erscheint, wenn es beibehalten würde. Also: Ich habe den Satz Abox [i]. Damit ich jedes Mal, wenn ich hereinkomme
Die Codekopie lautet wie folgt:
Funktion Wasserfall (Elternteil, Box) {
// Nehmen Sie alle Klassenkästen unter Inhalt heraus
var apparent = document.getElementById (übergeordnet);
var abox = getbClass (parent, box);
// Holen Sie sich die Breite der Box
var aboxw = abox [0] .Offsetwidth;
// Verwenden Sie die Breite des Browsers, um die Boxbreite zu teilen, um die Anzahl der Spalten zu erhalten
var cols = math.floor (document.documentElement.clientwidth/aboxw);
// Setzen Sie die Breite und das Zentrum des Inhalts
Aparent.Style.CSSTEXT = 'Breite:'+Aboxw*cols+'px; Höhe: Auto; Position: Relativ; Rand: 0 Auto; Padding-Light: 15px ';
// Erstellen Sie für jede Spalte Höhenarray
var harr = [];
für (var i = 0; i <abox.length; i ++) {
Abox [i] .Style.cSSTEXT = '';
if (i <cols) {
Harr.push (Abox [i] .offseteight);
}anders{
var minh = math.min.apply (null, harr);
var index = getMinIndex (Harr, Minh); // Ermitteln Sie den Indexwert mit der kürzesten Höhe heraus
//console.log(aboxw);
Abox [i] .Style.position = 'absolut';
Abox [i] .Style.top = minh+'px';
Abox [i] .Style.left = Aboxw*Index+'PX';
Harr [Index]+= Abox [i] .offseteight;
}
}
}
Dies löst den Fehler, der nach dem Schrumpfen nicht zurückgegeben werden kann, und kann sich normal anpassen
Schließlich habe ich das ganze JavaScript gepostet
Die Codekopie lautet wie folgt:
window.onload = function () {
// Wasserfallflussfunktion
Wasserfall ('Inhalt', 'Box');
// Simulieren Sie das Laden von Daten
var dataint = {"Data": [{"Src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr C ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}}
// Wenn sich die Bildschirmgröße ändert, wird die Wasserfallflussfunktion neu angepasst.
window.onResize = function () {
// Wasserfall ('Inhalt', 'Box');
setTimeout (function () {waterfall ('content', 'box');}, 200);
}
window.onscroll = function () {
if (poksCroll ()) {
var outdoor = document.getElementById ('Inhalt');
// Fügen Sie die gefärbten Daten in HTML hinzu
für (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createelement ("div");
obox.className = "box";
Outdoor.AppendChild (OBOX);
var opic = document.createelement ("div");
opic.className = "pic";
Obox.AppendChild (opic);
var oimg = document.createelement ("img");
oimg.src = "img/"+dataint.data [i] .src;
Opic.AppendChild (Oimg);
}
Wasserfall ('Inhalt', 'Box');
}
}
}
Funktion Wasserfall (Elternteil, Box) {
// Nehmen Sie alle Klassenkästen unter Inhalt heraus
var apparent = document.getElementById (übergeordnet);
var abox = getbClass (parent, box);
// Holen Sie sich die Breite der Box
var aboxw = abox [0] .Offsetwidth;
// Verwenden Sie die Breite des Browsers, um die Boxbreite zu teilen, um die Anzahl der Spalten zu erhalten
var cols = math.floor (document.documentElement.clientwidth/aboxw);
// Setzen Sie die Breite und das Zentrum des Inhalts
Aparent.Style.CSSTEXT = 'Breite:'+Aboxw*cols+'px; Höhe: Auto; Position: Relativ; Rand: 0 Auto; Padding-Light: 15px ';
// Erstellen Sie für jede Spalte Höhenarray
var harr = [];
für (var i = 0; i <abox.length; i ++) {
Abox [i] .Style.cSSTEXT = '';
if (i <cols) {
Harr.push (Abox [i] .offseteight);
}anders{
var minh = math.min.apply (null, harr);
var index = getMinIndex (Harr, Minh); // Ermitteln Sie den Indexwert mit der kürzesten Höhe heraus
//console.log(aboxw);
Abox [i] .Style.position = 'absolut';
Abox [i] .Style.top = minh+'px';
Abox [i] .Style.left = Aboxw*Index+'PX';
Harr [Index]+= Abox [i] .offseteight;
}
}
}
// Element gemäß der Klasse holen
Funktion getbClass (übergeordnet, klassenname) {
var boxarr = new Array (); // verwendet zum Speichern der erhaltenen Klasse
//console.log(parent.Prototype);
AllElement = parent.getElementsByTagName ('*');
für (var i = 0; i <allelement.length; i ++) {
if (AllElement [i] .ClassName == className) {
Boxarr.push (AllElement [i]);
}
}
Rückkehr Boxarr;
}
// Ermitteln Sie den kürzesten Indexwert
Funktion getMinIndex (arr, value) {
für (var i in arr) {
if (arr [i] == value) {
kehre I zurück;
}
}
}
// Erstellen Sie eine Funktion, die erkennt, ob das Radrutschen wahr ist oder nicht, und gibt wahr oder falsch zurück
Funktion ChecksCroll () {
var outdoor = document.getElementById ("Inhalt");
var obox = getbClass (Oparent, 'Box');
var lastOboxtop = obox [obox.length-1] .offsettop+math.floor (Obox [obox.length-1] .offseteight/2);
//console.log(LastOboxtop);
var scrolltop = document.body.scrolltop || document.documentElement.scrolltop;
var height = document.body.clientHeight || document.documentElement.clientHeight;
//console.log(Scrolltop);
return (lastOboxtop <scrolltop+Höhe)? Richtig: false;
}
Gepostet mit CSS -Datei
Die Codekopie lautet wie folgt:
*{Margin: 0; Polster: 0;}
Körper {Hintergrundfarbe: #eee;}
.Inhalt{
Position: Relativ;
}
.Kasten{
Polsterung: 15px 0 0 15px;
float: links;
}
.pic {
Polsterung: 10px;
Grenze: 1PX Solid #CCC;
Box-Shadow: 0 0 5px #CCCCCCC;
Border-Radius: 5px;
Hintergrund: #ffff;
}
.pic img {
Breite: 220px;
Höhe: Auto;
Grenze: 1PX Solid #eee;
}
Gepostet in HTML -Datei
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8" />
<title> JavaScript Waterfall Flow </title>
<link rel = "stylesheet" type = "text/css" href = "css/pubuli.css"/>
<script type = "text/javaScript" src = "js/my.js">/script>
</head>
<body>
<div id = "content">
<div>
<div>
<img src = "img/01.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/02.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/03.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/04.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/05.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/06.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/07.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/08.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/09.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/10.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/11.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/12.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/13.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/14.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/15.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/16.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/17.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/18.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/19.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/20.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/21.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
Okay, danke, dass du zugesehen hast. Ich habe noch nie technische Artikel geschrieben. Es gibt viele rücksichtslose Aspekte, von denen ich hoffe, dass Sie sie korrigieren können. Die kleinen Anfänger, die das vordere Ende lernen, geben y (^_^) y