La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Código de diseño de flujo de cascada </title>
<script type = "text/javaScript" src = "js/jQuery.js"> </script>
<style type = "text/css">
cuerpo, div, img, h1, h2, h3, h4, h5, h6 {relleno: 0px; margen: 0px; }
img {border: ninguno; }
.wrapper {ancho: 960px; margen: 0 auto; }
#Con1_1 {posición: relativo; }
#Con1_1 .Product_List {Position: Absolute; Izquierda: 0px; arriba: 0px; relleno: 10px; Antecedentes: #EEE; }
.product_list img {ancho: 200px; Pantalla: bloque; }
.product_list H2 {Padding: 5px 0px; tamaño de fuente: 12px; Text-Align: Center; Color:#333; }
</style>
</ablo>
<Body>
<div>
<h3> Esta es la parte del título del texto </h3>
<div id = "con1_1">
<div> <a href = "#"> <img src = "imágenes/img1.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img2.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img3.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img4.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img5.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "imágenes/img6.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img7.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
<Div> <a href = "#"> <img src = "Images/img8.jpg"> </a>
<H2> Altura de la imagen </h2>
</div>
</div>
<h3> La posición de esta línea de texto primero debe usarse para calcular la altura del contenido anterior usando JS </h3>
</div>
</body>
<script type = "text/javaScript">
/*
Principio: 1. Pon todos los valores de altura de Li en la matriz
2. Las blusas de la primera línea son 0
3. Calcule cuál es el valor más pequeño de la altura
4. Pon el siguiente Li debajo de ese li
*/
margen var = 10; // Establecer el espacio
var li = $ (". Product_list"); // Nombre del bloque
var li_w = li [0] .OffsetWidth+margin; // busca el ancho real del bloque
función liuxiaOfan () {
var h = []; // matriz que registra la altura del bloque
var n = 960/li_w | 0;
para (var i = 0; i <li.length; i ++) {
li_h = li [i] .Offsetheight; // Obtén la altura de cada li
if (i <n) {// n es el li con la mayoría de las líneas, por lo que menos de n es la primera línea
max_h = math.max.apply (null, h);
h [i] = li_h; // Pon cada li en la matriz
li.eq (i) .css ("top", 0); // El valor superior de Li en la primera línea es 0
li.eq (i) .css ("izquierda", i * li_w); // La coordenada izquierda del i-th li es el ancho de i * li
}
demás{
min_h = math.min.apply (null, h); // Obtenga el valor mínimo en la matriz, el que tiene el valor de altura más pequeño en el bloque
minkey = getArraykey (h, min_h); // puntero correspondiente al valor más pequeño
h [minkey] += li_h +margin; // Agregar valor de altura después de agregar una nueva altura
li.eq (i) .css ("top", min_h+margin); // Primero obtenga el Li con la altura más pequeña, y luego coloque el siguiente Li debajo de él
li.eq (i) .css ("izquierda", minkey * li_w); // La coordenada de izquierda del I-th li es el ancho de i*li
}
$ ("H2"). Eq (i) .Text ("Altura:"+li_h); // Escribe el valor de altura del bloque en el título del bloque H2 correspondiente
}
max = math.max.apply (nulo, h);
$ ("#con1_1"). CSS ("altura", max);
}
/ * Use el para la operación para devolver el número correspondiente de elementos de un cierto valor en la matriz (por ejemplo, calcular el valor de altura más pequeño es el número en la matriz) */
función getArrayKey (s, v) {para (k in s) {if (s [k] == v) {return k;}}}
/*Asegúrese de usar Onload aquí, porque la imagen no conoce el valor de altura si no está cargado*/
window.Onload = function () {liuxiaOfan ();};
window.onresize = function () {liuxiaOfan ();};
$ (function () {
$ (". Product_List"). Hover (function () {
$ (this) .CSS ("Color de fondo", "#DDD");
},función() {
$ (this) .css ("color de fondo", "#eee");
});
});
</script>
</html>