<div class="codetitle"> <span><a style="CURSOR: pointer" data="66439" class="copybut" id="copybut66439" onclick="doCopy('code66439')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code66439"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>瀑布流布局代码</title> <br><script type="text/javascript" src="js/jquery.js"></script> <br><style type="text/css"> <br>body, div, img, h1, h2, h3, h4, h5, h6 { padding:0px; margin:0px; } <br>img { border:none; } <br>.wrapper { width:960px; margin:0 auto; } <br>#con1_1 { position:relative; } <br>#con1_1 .product_list { position:absolute; left:0px; top:0px; padding:10px; background:#eee; } <br>.product_list img { width:200px; display:block; } <br>.product_list h2 { padding:5px 0px; font-size:12px; text-align:center; color:#333; } <br></style> <br></head> <br><body> <br><div class="wrapper"> <br><h3>这是正文的标题部分</h3> <br><div id="con1_1"> <br><div class="product_list"> <a href="#"><img src="images/img1.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img2.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img3.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img4.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img5.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img6.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img7.jpg"></a> <br><h2>图片高度</h2> <br></div> <br><div class="product_list"> <a href="#"><img src="images/img8.jpg"></a> <br><h2>图片高度</h2> <br></div> <br></div> <br><h3>这行文字的位置首先要用js去计算下上面内容的高度了</h3> <br></div> <br></body> <br><script type="text/javascript"> <br>/* <br>원리: 1. 모든 li의 높이 값을 배열에 넣습니다. > 2. 첫 번째 줄의 상단은 모두 0입니다. <br>3. 높이 값이 가장 작은 li를 계산합니다. <br>4. 해당 li 아래에 다음 li를 배치합니다. <br>*/ <br>var margin = 10; //간격 설정<br>var li=$(".product_list");//블록 이름<br>var li_W = li[0].offsetWidth margin;//블록의 실제 너비 가져오기<br>함수 liuxiaofan(){ <br>var h=[];//배열 기록 블록 높이<br>var n = 960/li_W|0; <br>for(var i = 0;i < li.length;i ) { <br>li_H = li[i].offsetHeight;//각 li의 높이를 가져옵니다. <br>if(i < n) {//n은 연속으로 가장 많은 li이므로 n보다 작은 경우 , 첫 번째 한 줄입니다. <br>max_H =Math.max.apply(null,h); <br>h[i]=li_H;//각 li를 배열에 넣습니다<br>li.eq(i) .css ("top",0);//첫 번째 행에 있는 Li의 상위 값은 0입니다. <br>li.eq(i).css("left",i * li_W);//Li의 왼쪽 좌표 i번째 li i*li의 너비입니다<br>} <br>else{ <br>min_H =Math.min.apply(null,h);//배열의 최소값을 가져옵니다. 블록에서 가장 작은 높이 값<br>minKey = getarraykey(h, min_H);//가장 작은 값에 해당하는 포인터<br>h[minKey] = li_H margin;//새 값을 추가한 후 높이 값을 업데이트합니다. height<br>li.eq(i).css ("top",min_H margin);//높이가 가장 작은 Li를 먼저 가져온 후 그 아래에 다음 Li를 넣습니다<br>li.eq(i). css("left",minKey * li_W); //i번째 li의 왼쪽 좌표는 i*li의 너비입니다. <br>} <br>$("h2").eq(i).text( "Height:" li_H); //해당 블록 H2 제목에 쓰기 <br>} <br>max =Math.max.apply(null,h) <br>$("#con1_1" ).css("height",max); <br>} <br>/* 배열에서 특정 값의 해당 항목 수를 반환하려면 연산에서 for를 사용합니다. (예: 가장 작은 높이의 수를 계산합니다. 값) */ <br>function getarraykey(s, v) { for(k in s) {if(s[k] == v) {return k;}}} <br>/*Onload는 다음과 같아야 합니다. 여기서는 이미지가 로드될 때까지 높이 값을 알 수 없기 때문에 여기에 사용되었습니다*/ <br> window.onload = function() {liuxiaofan();} <br>window.onresize = function() {liuxiaofan(); }; <br><br><br>$(function(){ <br>$ (".product_list").hover(function(){ <br>$(this).css("배경색", "#ddd"); <br>},function() { <br>$(this ).css("Background-color","#eee") <br>}); 🎜></script> <br></html> <br><br> </div>