코드 사본은 다음과 같습니다.
<! 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>
<스타일 유형 = "텍스트/CSS">
Body, Div, IMG, H1, H2, H3, H4, H5, H6 {패딩 : 0px; 여백 : 0px; }
img {국경 : 없음; }
.wrapper {너비 : 960px; 여백 : 0 Auto; }
#con1_1 {위치 : 상대; }
#con1_1 .product_list {위치 : 절대; 왼쪽 : 0px; 상단 : 0px; 패딩 : 10px; 배경 : #eee; }
.product_list img {너비 : 200px; 디스플레이 : 블록; }
.Product_List H2 {패딩 : 5px 0px; 글꼴 크기 : 12px; 텍스트 정렬 : 센터; 색상 :#333; }
</스타일>
</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;
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 +마진; // 새로운 높이를 추가 한 후 높이 값 추가
li.eq (i) .css ( "상단", 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 ( "높이", max);
}
/ * 작동중인 작업을 사용하여 배열에서 특정 값의 해당 항목 수를 반환합니다 (예 : 가장 작은 높이 값을 배열의 숫자라고 계산하십시오) */
함수 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");
},기능() {
$ (this) .css ( "배경색", "#eee");
});
});
</스크립트>
</html>