Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<judul> Kode tata letak aliran air terjun </iteme>
<type skrip = "Text/JavaScript" src = "js/jQuery.js"> </script>
<type style = "text/css">
tubuh, div, img, h1, h2, h3, h4, h5, h6 {padding: 0px; margin: 0px; }
img {border: none; }
.wrapper {width: 960px; margin: 0 otomatis; }
#con1_1 {position: relatif; }
#con1_1 .product_list {position: absolute; Kiri: 0px; Atas: 0px; padding: 10px; Latar Belakang: #EEE; }
.product_list img {lebar: 200px; Tampilan: Blok; }
.product_list h2 {padding: 5px 0px; font-size: 12px; Teks-Align: tengah; Warna:#333; }
</tyle>
</head>
<body>
<div>
<h3> Ini adalah bagian judul dari teks </h3>
<Div id = "con1_1">
<div> <a href = "#"> <img src = "gambar/img1.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img2.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img3.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img4.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img5.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img6.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img7.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
<div> <a href = "#"> <img src = "gambar/img8.jpg"> </a>
<h2> Tinggi gambar </h2>
</div>
</div>
<h3> Posisi baris teks ini pertama -tama harus digunakan untuk menghitung ketinggian konten di atas menggunakan JS </h3>
</div>
</body>
<type skrip = "Teks/JavaScript">
/*
Prinsip: 1. Masukkan semua nilai ketinggian Li di array
2. Bagian atas baris pertama adalah 0
3. Hitung Li mana yang merupakan nilai tinggi terkecil
4. Letakkan li berikutnya di bawah li itu
*/
var margin = 10; // atur spasi
var li = $ (". Product_list"); // name blok
var li_w = li [0] .offsetWidth+margin; // Ambil lebar sebenarnya dari blok
fungsi liuxiaofan () {
var h = []; // array yang mencatat ketinggian blok
var n = 960/li_w | 0;
untuk (var i = 0; i <li.length; i ++) {
li_h = li [i] .offsetHeight; // Dapatkan ketinggian masing -masing li
if (i <n) {// n adalah li dengan garis terbanyak, jadi kurang dari n adalah baris pertama
max_h = Math.max.Apply (null, h);
h [i] = li_h; // Masukkan setiap li ke dalam array
li.eq (i) .css ("atas", 0); // Nilai teratas Li di baris pertama adalah 0
li.eq (i) .css ("kiri", i * li_w); // Koordinat kiri i-th li adalah lebar i * li
}
kalau tidak{
min_h = math.min.Apply (null, h); // Dapatkan nilai minimum dalam array, yang dengan nilai tinggi terkecil di blok
MINEKY = GETArrayKey (H, min_h); // Pointer sesuai dengan nilai terkecil
H [MINKEY] += li_h +margin; // Tambahkan nilai tinggi setelah menambahkan ketinggian baru
li.eq (i) .css ("atas", min_h+margin); // Pertama dapatkan li dengan ketinggian terkecil, dan kemudian letakkan li berikutnya di bawahnya
li.eq (i) .css ("kiri", MertKey * li_W); // Koordinat kiri i-th li adalah lebar i*li
}
$ ("h2"). eq (i) .text ("tinggi:"+li_h); // Tulis nilai tinggi blok ke dalam judul blok H2 yang sesuai
}
Max = Math.max.Apply (null, h);
$ ("#con1_1"). css ("tinggi", maks);
}
/ * Gunakan untuk operasi untuk mengembalikan jumlah item yang sesuai dari nilai tertentu dalam array (misalnya, hitung nilai tinggi terkecil adalah angka dalam array) */
fungsi getArrayKey (s, v) {for (k in s) {if (s [k] == v) {return k;}}}
/*Pastikan untuk menggunakan onload di sini, karena gambar tidak tahu nilai tinggi jika tidak dimuat*/
window.onload = function () {liuxiaofan ();};
window.onresize = function () {liuxiaofan ();};
$ (function () {
$ (". Product_list"). Hover (function () {
$ (ini) .css ("latar belakang-warna", "#ddd");
},fungsi() {
$ (ini) .css ("latar belakang-warna", "#eee");
});
});
</script>
</html>