A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Código de layout de fluxo em cascata </title>
<script type = "text/javascript" src = "js/jQuery.js"> </script>
<style type = "text/css">
corpo, div, img, h1, h2, h3, h4, h5, h6 {preenchimento: 0px; margem: 0px; }
img {border: Nenhum; }
.wrapper {width: 960px; margem: 0 automático; }
#con1_1 {position: relativo; }
#con1_1 .product_list {posição: absoluto; Esquerda: 0px; Top: 0px; preenchimento: 10px; Antecedentes: #eee; }
.product_list img {width: 200px; exibição: bloco; }
.product_list h2 {preenchimento: 5px 0px; tamanho de fonte: 12px; Alinhamento de texto: centro; Cor:#333; }
</style>
</head>
<Body>
<div>
<H3> Esta é a parte do título do texto </h3>
<div id = "con1_1">
<div> <a href = "#"> <img src = "imagens/img1.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img2.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img3.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img4.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img5.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img6.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img7.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
<div> <a href = "#"> <img src = "imagens/img8.jpg"> </a>
<H2> Altura da imagem </h2>
</div>
</div>
<H3> A posição dessa linha de texto deve primeiro ser usada para calcular a altura do conteúdo acima usando JS </h3>
</div>
</body>
<script type = "text/javascript">
/*
Princípio: 1. Coloque todos os valores de altura de Li na matriz
2. Os topos da primeira linha são 0
3. Calcule qual li é o menor valor de altura
4. Coloque o próximo li sob aquele li
*/
margem var = 10; // defina o espaçamento
var li = $ (". Product_list"); // Nome do bloco
var li_w = li [0] .offsetWidth+margem; // buscar a largura real do bloco
função Liuxiaofan () {
var h = []; // matriz que registra a altura do bloco
var n = 960/li_w | 0;
for (var i = 0; i <li.length; i ++) {
li_h = li [i] .offSethEight; // Obtenha a altura de cada li
se (i <n) {// n é o li com mais linhas, então menos que n é a primeira linha
max_h = math.max.apply (null, h);
h [i] = li_h; // coloque cada li na matriz
li.eq (i) .css ("top", 0); // o valor superior de li na primeira linha é 0
li.eq (i) .css ("esquerda", i * li_w); // a coordenada esquerda do i-th li é a largura de i * li
}
outro{
min_h = math.minmin.apply (null, h); // obtenha o valor mínimo na matriz, aquele com o menor valor de altura no bloco
minkey = getArrayKey (h, min_h); // ponteiro correspondente ao menor valor
h [minkey] += li_h +margem; // Adicione o valor da altura após adicionar uma nova altura
li.eq (i) .css ("top", min_h+margem); // primeiro pegue o li com a menor altura e depois coloque o próximo li sob ele
li.eq (i) .css ("esquerda", minkey * li_w); // A coordenada esquerda do i -th li é a largura de I*li
}
$ ("h2"). Eq (i) .Text ("altura:"+li_h); // Escreva o valor da altura do bloco no título do bloco H2 correspondente
}
max = math.max.apply (null, h);
$ ("#con1_1"). css ("altura", max);
}
/ * Use a operação para retornar o número correspondente de itens de um determinado valor na matriz (por exemplo, calcular o menor valor de altura é o número da matriz) */
função getArrayKey (s, v) {for (k in s) {if (s [k] == v) {return k;}}}
/*Certifique -se de usar o ONLOAD aqui, porque a imagem não conhece o valor da altura se não for carregado*/
window.onload = function () {Liuxiaofan ();};
window.onResize = function () {Liuxiaofan ();};
$ (function () {
$ (". product_list"). hover (function () {
$ (this) .css ("cor de fundo", "#ddd");
}, function () {
$ (this) .css ("cor de fundo", "#eee");
});
});
</script>
</html>