การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> รหัสเค้าโครงไหลของน้ำตก </title>
<script type = "text/javascript" src = "js/jQuery.js"> </script>
<style type = "text/css">
ร่างกาย, div, img, h1, h2, h3, h4, h5, h6 {padding: 0px; มาร์จิ้น: 0px; -
img {ชายแดน: ไม่มี; -
.Wrapper {Width: 960px; มาร์จิ้น: 0 อัตโนมัติ; -
#con1_1 {ตำแหน่ง: ญาติ; -
#con1_1 .product_list {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; Padding: 10px; ความเป็นมา: #eee; -
.product_list img {width: 200px; แสดง: บล็อก; -
.product_list h2 {padding: 5px 0px; ขนาดตัวอักษร: 12px; TEXT-ALIGN: CENTER; สี:#333; -
</style>
</head>
<body>
<div>
<H3> นี่คือส่วนชื่อของข้อความ </h3>
<div id = "con1_1">
<div> <a href = "#"> <img src = "images/img1.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img2.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img3.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img4.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img5.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img6.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img7.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
<div> <a href = "#"> <img src = "images/img8.jpg"> </a>
<H2> ความสูงของภาพ </h2>
</div>
</div>
<H3> ตำแหน่งของข้อความนี้จะต้องใช้ก่อนคำนวณความสูงของเนื้อหาข้างต้นโดยใช้ JS </h3>
</div>
</body>
<script type = "text/javascript">
-
หลักการ: 1. ใส่ค่าความสูงทั้งหมดของ LI ในอาร์เรย์
2. ยอดของบรรทัดแรกคือ 0
3. คำนวณว่า Li เป็นค่าที่น้อยที่สุดของความสูง
4. ใส่ li ถัดไปไว้ใต้ li นั้น
-
var margin = 10; // ตั้งค่าระยะห่าง
var li = $ (". product_list"); // ชื่อบล็อก
var li_w = li [0] .offsetWidth+margin; // ดึงความกว้างที่แท้จริงของบล็อก
ฟังก์ชั่น liuxiaofan () {
var h = []; // อาร์เรย์ที่บันทึกความสูงของบล็อก
var n = 960/li_w | 0;
สำหรับ (var i = 0; i <li.length; i ++) {
li_h = li [i] .OffSetheight; // ได้รับความสูงของแต่ละ li
if (i <n) {// n คือ Li ที่มีเส้นมากที่สุดดังนั้นน้อยกว่า n คือบรรทัดแรก
max_h = math.max.apply (null, h);
h [i] = li_h; // ใส่แต่ละ li ลงในอาร์เรย์
li.eq (i) .css ("top", 0); // ค่าสูงสุดของ li ในบรรทัดแรกคือ 0
li.eq (i) .css ("ซ้าย", i * li_w); // พิกัดซ้ายของ i-th li คือความกว้างของ i * li
-
อื่น{
min_h = math.min.apply (null, h); // รับค่าต่ำสุดในอาร์เรย์หนึ่งที่มีค่าความสูงที่เล็กที่สุดในบล็อก
minkey = getArraykey (h, min_h); // ตัวชี้ที่สอดคล้องกับค่าที่เล็กที่สุด
H [Minkey] += li_h +margin; // เพิ่มค่าความสูงหลังจากเพิ่มความสูงใหม่
li.eq (i) .css ("top", min_h+margin); // ก่อนได้รับ li ที่มีความสูงที่เล็กที่สุดจากนั้นใส่ li ถัดไปไว้ใต้มัน
li.eq (i) .css ("ซ้าย", Minkey * li_w); // พิกัดซ้ายของ i-th li คือความกว้างของ i*li
-
$ ("h2"). eq (i) .text ("ความสูง:"+li_h); // เขียนค่าความสูงของบล็อกลงในบล็อก H2 ที่สอดคล้องกัน
-
max = math.max.apply (null, h);
$ ("#con1_1"). CSS ("ความสูง", สูงสุด);
-
/ * ใช้การดำเนินการสำหรับการทำงานเพื่อส่งคืนจำนวนรายการที่สอดคล้องกันของค่าที่แน่นอนในอาร์เรย์ (ตัวอย่างเช่นคำนวณค่าความสูงที่เล็กที่สุดคือจำนวนในอาร์เรย์) *//
ฟังก์ชั่น getarraykey (s, v) {สำหรับ (k in s) {ถ้า (s [k] == v) {return k;}}}
/*ตรวจสอบให้แน่ใจว่าใช้ OnLoad ที่นี่เพราะภาพไม่ทราบค่าความสูงหากไม่ได้โหลด*//
window.onload = function () {liuxiaofan ();};
window.onresize = function () {liuxiaofan ();};
$ (function () {
$ (". product_list"). hover (function () {
$ (นี่) .css ("พื้นหลังสี", "#ddd");
},การทำงาน() {
$ (นี่) .css ("พื้นหลังสี", "#eee");
-
-
</script>
</html>