<!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" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>简单CSS定位瀑布流实现方法</title> <style type="text/css"> /* * @name: * @time: 2016-12-07 * @author: wht */ body , html { height: 100%; } /* basic */ body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; } body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; } ul { list-style:none; overflow:hidden; } img { border:none; } /* content */ .content {margin:10px auto; } /* case-list */ .case-list { margin:0 auto; } .case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;} .case-list li img { display:block;border-radius:5px;margin-left:5px; } </style> </head> <body> <!-- content --> <div class="content" id="content"> <ul class="case-list" id="case-list"> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> <li><img src="4.jpg" alt="" /></li> <li><img src="5.jpg" alt="" /></li> <li><img src="5.jpg" alt="" /></li> <li><img src="7.jpg" alt="" /></li> <li><img src="8.jpg" alt="" /></li> <li><img src="9.jpg" alt="" /></li> <li><img src="10.jpg" alt="" /></li> <li><img src="11.jpg" alt="" /></li> <li><img src="12.jpg" alt="" /></li> <li><img src="13.jpg" alt="" /></li> <li><img src="14.jpg" alt="" /></li> <li><img src="15.jpg" alt="" /></li> <li><img src="16.jpg" alt="" /></li> <li><img src="17.jpg" alt="" /></li> <li><img src="18.jpg" alt="" /></li> <li><img src="19.jpg" alt="" /></li> <li><img src="20.jpg" alt="" /></li> </ul> </div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> window.onload = function(){ var windowW=$(window).width(); //console.log(windowW); var imgW=$("#case-list li>img").width(); var hNum=parseInt(windowW/imgW); var cases = $("#case-list li"); var case_h = new Array(); for(var j=0;j<hNum;j++){ case_h[j] = new Array(); } $.each(cases, function(i){ var hNum=parseInt(windowW/imgW); var m = i%hNum; case_h[m].push(cases.eq(i).height()); var step = Math.floor(i/hNum); cases.eq(i).css("left", (imgW + 10)*m+"px"); // console.log(step); if(!step){ cases.eq(i).css("top", "0"); }else{ var num = 0; for(var n = 0; n<step;n++){ num += case_h[m][n] + 20; } cases.eq(i).css("top", num+"px"); } }); } </script> </body> </html>