Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Wasserfallflusslayout -Code </title>
<script type = "text/javaScript" src = "js/jquery.js"> </script>
<style type = "text/css">
Körper, Div, Img, H1, H2, H3, H4, H5, H6 {Padding: 0px; Rand: 0px; }
Img {Border: Keine; }
.wrapper {width: 960px; Rand: 0 Auto; }
#con1_1 {Position: relativ; }
#con1_1 .Product_list {Position: absolut; links: 0px; Oben: 0px; Polsterung: 10px; Hintergrund: #eee; }
.Product_list img {width: 200px; Anzeige: Block; }
.Product_List H2 {Padding: 5px 0px; Schriftgröße: 12px; Text-Align: Mitte; Farbe:#333; }
</style>
</head>
<body>
<div>
<h3> Dies ist der Titelteil des Textes </h3>
<div id = "con1_1">
<div> <a href = "#"> <img Src = "Bilder/img1.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img Src = "Bilder/img2.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img Src = "Bilder/img3.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img src = "Bilder/img4.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img src = "Bilder/img5.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img Src = "Bilder/img6.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img src = "Bilder/img7.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
<div> <a href = "#"> <img src = "Bilder/img8.jpg"> </a>
<h2> Bildhöhe </h2>
</div>
</div>
<h3> Die Position dieser Textzeile muss zunächst verwendet werden, um die Höhe des obigen Inhalts mit JS </H3> zu berechnen
</div>
</body>
<script type = "text/javaScript">
/*
Prinzip: 1. Geben Sie alle Höhenwerte von Li in das Array ein
2. Die Spitzen der ersten Zeile sind 0
3. Berechnen Sie, welcher Li der kleinste Wert der Höhe ist
V.
*/
var margin = 10; // Setzen Sie den Abstand
var li = $ (". product_list"); // Blockname
var li_w = li [0] .Offsetwidth+Margin; // Die tatsächliche Breite des Blocks abrufen
Funktion liuxiaofan () {
var h = []; // Array, das die Höhe des Blocks aufzeichnet
var n = 960/li_w | 0;
für (var i = 0; i <li.length; i ++) {
li_h = li [i] .offseteight; // Holen Sie sich die Höhe jedes Li
if (i <n) {// n ist der Li mit den meisten Zeilen, also weniger als n ist die erste Zeile
max_h = math.max.apply (null, h);
h [i] = li_h; // Steck jedes Li in das Array
li.eq (i) .css ("top", 0); // Der Top -Wert von li in der ersten Zeile ist 0
li.eq (i) .css ("links", i * li_w); // Die linke Koordinate des i-th li ist die Breite von i * li
}
anders{
min_h = math.min.apply (null, h); // Erhalten Sie den Mindestwert im Array, den mit dem kleinsten Höhenwert im Block
minkey = getarraykey (h, min_h); // Zeiger entspricht dem kleinsten Wert
h [minkey] += li_h +margin; // Hinzufügen des Höhenwerts nach dem Hinzufügen einer neuen Höhe
li.eq (i) .css ("top", min_h+margin); // Holen Sie sich zuerst das Li mit der kleinsten Höhe und setzen Sie dann den nächsten Li darunter
li.eq (i) .css ("links", minkey * li_w); // Die linke Koordinate des i-h li ist die Breite von i*li
}
$ ("H2"). EQ (i) .Text ("Höhe:"+li_h); // Schreiben Sie den Blockhöhewert in den entsprechenden Block H2 -Titel
}
max = math.max.apply (null, h);
$ ("#con1_1"). CSS ("Höhe", max);
}
/ * Verwenden Sie die für den Betrieb, um die entsprechende Anzahl von Elementen eines bestimmten Wertes im Array zurückzugeben (z. B. berechnen Sie den kleinsten Höhenwert im Array) */
Funktion getArrayKey (s, v) {für (k in s) {if (s [k] == v) {return k;}}}
/*Verwenden Sie hier unbedingt Onload, da das Bild den Höhenwert nicht kennt, wenn es nicht geladen ist*/
window.onload = function () {liuxiaofan ();};
window.onResize = function () {liuxiaofan ();};
$ (function () {
$ (". product_list"). hover (function () {
$ (this) .css ("Hintergrundfarbe", "#ddd");
}, function () {
$ (this) .css ("Hintergrundfarbe", "#eee");
});
});
</script>
</html>