Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Код макета потока водопада </title>
<script type = "text/javascript" src = "js/jquery.js"> </script>
<стиль типа = "text/css">
Body, Div, IMG, H1, H2, H3, H4, H5, H6 {Padding: 0px; поля: 0px; }
img {граница: нет; }
.wrapper {ширина: 960px; Поле: 0 Авто; }
#con1_1 {позиция: относительно; }
#con1_1 .product_list {position: Absolute; слева: 0px; Верх: 0px; Заполнение: 10px; Фон: #EEE; }
.product_list img {width: 200px; дисплей: блок; }
.product_list H2 {Padding: 5px 0px; размер шрифта: 12px; Текст-альбом: Центр; Цвет:#333; }
</style>
</head>
<тело>
<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;
for (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 ("Left", Minkey * li_w); // левая координата i-th li является шириной i*li
}
$ ("H2"). EQ (i) .Text ("Height:"+li_h); // Написать значение высоты блока в соответствующий заголовок Block H2
}
max = math.max.apply (null, h);
$ ("#con1_1"). CSS ("высота", макс);
}
/ * Используйте для операции, чтобы вернуть соответствующее количество элементов определенного значения в массиве (например, рассчитайте наименьшее значение высоты - это число в массиве) *//
Функция getarraykey (s, v) {for (k in s) {if (s [k] == v) {return k;}}}
/*Обязательно используйте здесь нагрузку, потому что изображение не знает значения высоты, если оно не загружено*/
window.onload = function () {liuxiaofan ();};
window.onresize = function () {liuxiaofan ();};
$ (function () {
$ (". Product_list"). Hover (function () {
$ (this) .css («фоновый цвет», "#ddd");
}, function () {
$ (this) .css («фоновый цвет», "#eee");
});
});
</script>
</html>