نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<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>
<type type = "text/css">
الجسم ، Div ، IMG ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 {padding: 0px ؛ الهامش: 0px ؛ }
IMG {الحدود: لا شيء ؛ }
.wrapper {العرض: 960px ؛ الهامش: 0 Auto ؛ }
#con1_1 {الموضع: النسبي ؛ }
#con1_1 .product_list {الموضع: absolute ؛ اليسار: 0px ؛ أعلى: 0px ؛ الحشو: 10 بكسل ؛ الخلفية: #EEE ؛ }
.product_list img {width: 200px ؛ العرض: كتلة ؛ }
.product_list H2 {padding: 5px 0px ؛ حجم الخط: 12 بكسل ؛ محاذاة النص: المركز ؛ اللون:#333 ؛ }
</style>
</head>
<body>
<viv>
<h3> هذا هو جزء العنوان من النص </h3>
<div id = "con1_1">
<viv> <a href = "#"> <img src = "images/img1.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "الصور/img2.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "الصور/img3.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "الصور/img4.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "الصور/img5.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "images/img6.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <a href = "#"> <img src = "images/img7.jpg"> </a>
<h2> ارتفاع الصورة </h2>
</div>
<viv> <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. حساب أي لي هو أصغر قيمة للارتفاع
4. ضع لي التالي تحت هذا لي
*/
var margin = 10 ؛ // اضبط التباعد
var li = $ (". product_list") ؛ // block name
var li_w = li [0]
وظيفة liuxiaofan () {
var h = [] ؛ // array التي تسجل ارتفاع الكتلة
var n = 960/li_w | 0 ؛
لـ (var i = 0 ؛ i <li.length ؛ i ++) {
li_h = li [i] .offsetheight ؛ // احصل على ارتفاع كل li
إذا كان (i <n) {// n هو li مع معظم الخطوط ، لذلك أقل من n هو السطر الأول
max_h = math.max.apply (null ، h) ؛
h [i] = li_h ؛ // ضع كل لي في الصفيف
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.eq (i) .css ("left" ، minkey * li_w) ؛ // الإحداثي الأيسر من i-th li هو عرض i*li
}
$ ("H2"). Eq (i) .text ("الارتفاع:"+li_h) ؛ // اكتب قيمة ارتفاع الكتلة في عنوان الكتلة H2 المقابلة
}
max = math.max.apply (null ، h) ؛
$ ("#con1_1"). css ("height" ، max) ؛
}
/ * استخدم لـ in in Operation لإرجاع العدد المقابل لعناصر قيمة معينة في الصفيف (على سبيل المثال ، حساب أصغر قيمة ارتفاع هو الرقم في المصفوفة) */
وظيفة getArrayKey (s ، v) {for (k in s) {if (s [k] == v) {return k ؛}}}
/*تأكد من استخدام Onload هنا ، لأن الصورة لا تعرف قيمة الارتفاع إذا لم يتم تحميلها*/
window.onload = function () {liuxiaofan () ؛} ؛
window.onresize = function () {liuxiaofan () ؛} ؛
$ (function () {
$ (". product_list"). hover (function () {
$ (this) .css ("background-color" ، "#ddd") ؛
}،وظيفة() {
$ (this) .css ("background-color" ، "#eee") ؛
}) ؛
}) ؛
</script>
</html>