HTML (achten Sie auf die Paketbeziehung, um den Aufruf von js zu erleichtern)
WENIGER(less预编译)
* {
Rand: 0;
Polsterung: 0;
}
#main {
Position: relativ;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
Polsterung: 10px;
Rand: 1px fest #ccc;
Randradius: 5px;
Box-Shadow: 0px 0px 5px #ccc;
img {
Breite:165px;
height:auto;
}
}
JavaScript(自己理解的注解)
(函数存在一定瑕疵,仅用于学习理解)
window.onload = function () {
Wasserfall("main","box");
//Eine benutzerdefinierte Funktion aufrufen; wirkt auf jedes Boxelement unter main;
var dataInt = { "data":[{"src":7.jpg"},{"src":8.jpg"},{"src":9.jpg"},{"src": "6.jpg"}]}
//JSON-Daten simulieren;
Window.onscroll = function () {
if (checkScrollSlide) {
//Eine benutzerdefinierte Funktion aufrufen; anhand des Rückgabewerts der Funktion feststellen, ob der Bildlauf außerhalb des Bereichs liegt;
var oParent = document.getElementById("main");
for (var i = 0; i < dataInt.data.length; i ) {
var oBox = document.createElement("div");
oBox.className = "box";
oParent.appendChild(oBox);
//Boxblock erstellen
var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
//Bildblock erstellen
var oImg = document.createElement("img");
//img-Element erstellen
oImg.src = "images/" dataInt.data[i].src;
//Bildreferenz festlegen;
oPic.appendChild(oImg);
};
Wasserfall("main","box");
// Dynamisch generierte Datenblöcke im Streaming-Stil anordnen;
};
};
};
//Hauptfunktion des Streaming-Layouts, passt die Position von Datenblöcken automatisch an;
Funktion Wasserfall (übergeordnet, Box) {
// Nehmen Sie alle Box-Elemente unter main heraus; „parent“ repräsentiert das übergeordnete Element und box repräsentiert das Box-Element;
var oParent = document.getElementById(parent);
//Weisen Sie das übergeordnete Element der Variablen oParent;
zu
var oBoxs = getByClass(oParent,box);
// Über die benutzerdefinierte Funktion erhalten Sie jedes Boxelement unter dem übergeordneten Element. Sie erhalten die Sammlung aller Boxelemente
//Weisen Sie den erhaltenen Satz von Boxelementen erneut oBoxen zu (aus Gründen des Gültigkeitsbereichs werden Variablen nicht gemeinsam genutzt);
// console.log(oBoxs.length);
//Drucken Sie die Anzahl der Boxelemente in der Konsole zum Debuggen;
var oBoxW = oBoxs[0].offsetWidth;
//Berechne die Breite jeder Spalte; offsetWidth ist die Breite einschließlich Polsterung;
// console.log(oBoxW); test;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//Berechnen Sie die Anzahl der auf der gesamten Seite angezeigten Spalten (Seitenbreite/Boxbreite);
oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
//Die Breite des übergeordneten Elements main = die Breite jeder Spalte * die Anzahl der Spalten; und zentriert auf der linken und rechten Seite;
var hArr = [];
//Array, das die Höhe jeder Spalte speichert;
for (var i = 0; i < oBoxs.length; i ) {
//Das oBoxs-Array durchlaufen;
If (i
//Der qualifizierte hier ist der erste in jeder Spalte der ersten Zeile;
hArr.push(oBoxs[i].offsetHeight);
//Ermitteln Sie die Höhe jeder Spalte und fügen Sie sie in das Array ein;
}sonst{
//Das Box-Element ist hier nicht mehr das Element in der ersten Zeile;
var minH = Math.min.apply(null,hArr);
//Ermitteln Sie die Mindesthöhe der ersten Zeile und weisen Sie sie der Variablen zu;
// console.log(minH);
var index = getMinhIndex(hArr,minH);
//Eine benutzerdefinierte Funktion aufrufen, um den Indexwert dieser Variablen abzurufen;
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH "px";
oBoxs[i].style.left = oBoxW*index "px";
//Legen Sie die Position des aktuellen Elements fest;
//Der linke Wert des aktuellen Elements = der Indexwert des oberen Elements * die Breite jeder Spalte;
//oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
//Die zweite Methode besteht darin, den linken Wert des aktuellen Elements abzurufen;
//Zu diesem Zeitpunkt wird der Indexspalte ein Box-Element hinzugefügt;
hArr[index] =oBoxs[i].offsetHeight;
//Die aktualisierte Höhe jeder Spalte = die ursprüngliche Höhe jeder Spalte und die Höhe des später hinzugefügten Boxelements;
};
};
};
//JS erhält Elemente nativ über Class;
Funktion getByClass (parent,claName) {
// Elemente über die Klasse abrufen; (Element von claName unter dem Container des übergeordneten Elements abrufen;)
var boxArr = new Array();
//Deklarieren Sie ein Array zum Speichern aller erhaltenen Elemente mit der Klassenbox;
var oElements = parent.getElementsByTagName("*")
//Variablen deklarieren, um alle untergeordneten Elemente unter diesem übergeordneten Element (*);
zu speichern
for (var i = 0; i < oElements.length; i ) {
//Durchlaufe das Array oElements;
If (oElements[i].className==claName) {
//Wenn die Calss-Klasse eines Elements im Array mit dem Parameter claName;
übereinstimmt
boxArr.push(oElements[i]);
//Kategorie des durchlaufenen Box-Elements in das BoxArr-Array;
};
};
Return boxArr;
// Nach dem Aufruf des Arrays eine Reihe von Funktionen durchlaufen; das erhaltene Array an die aufrufende Funktion zurückgeben;
};
//Den Indexwert des Array-Elements abrufen;
Funktion getMinhIndex (arr,val) {
//arr ist das übergeordnete Array; val ist das aktuelle Element;
for(var i in arr){
//Beginnen Sie mit der Durchquerung bei 0;
If(arr[i]==val){
//Suchen Sie den Indexwert, der dem aktuellen Element im Array entspricht;
return i;
//Der Rückgabewert der Funktion ist der Indexwert des aktuellen Elements;
};
};
};
//Überprüfen Sie, ob die Bedingungen für das rollierende Laden von Datenblöcken erfüllt sind;
Funktion checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//Die Höhe des letzten Boxelements vom oberen Rand der Seite (Finden Sie den OffsetTop der letzten Box (oBoxs.lenght-1)) zur Hälfte von sich selbst
var scrollTop = document.body.scrollTop ||. document.documentElement.scrollTop;
//Die Scrolldistanz der Browser-Bildlaufleiste;
// console.log(scrollTop);
var height = document.body.clientHeight ||. document.documentElement.clientHeight;
//Höhe des Browser-Ansichtsfensters;
// console.log(height);
Rückgabe (lastBoxH
//Ob der Scrollabstand der Seite größer ist als der OffsetTop des letzten Boxelements;
};
Zusammenfassung:
Es gibt nichts Besseres, als den Wasserfallfluss zu verwenden, um Fotos anzuzeigen. Das Folgende ist eine Implementierungsmethode für den Wasserfallfluss (die Länge jeder Zeile entspricht der Länge des Browserfensters). Das können Sie ganz einfach herausfinden, indem Sie bei Google suchen.
Meine Idee ist, Bilder einzeln einzufügen. Wenn das Seitenverhältnis dieser Bildzeile unverändert bleibt und die Höhe unter 250 liegt, ist ein Zyklus abgeschlossen, dh diese Zeile wird eingefügt.
Geben Sie dann die nächste Schleife ein, um die nächste Zeile einzufügen.
