1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div.item{ 8 position: absolute; 9 width: 320px; 10 margin: 10px; 11 transition: all 1s; 12 } 13 div#content{ 14 position: relative; 15 16 } 17 .part1{ 18 background-color: yellow; 19 height: 200px; 20 } 21 .part2{ 22 background-color: #006ac1; 23 height: 400px; 24 } 25 .part3{ 26 background-color: blueviolet; 27 height: 300px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="content"> 33 <div class="item part1">1</div> 34 <div class="item part2">2</div> 35 <div class="item part3">3</div> 36 <div class="item part1">4</div> 37 <div class="item part1">5</div> 38 <div class="item part2">6</div> 39 <div class="item part2">7</div> 40 <div class="item part3">8</div> 41 <div class="item part1">9</div> 42 <div class="item part2">10</div> 43 <div class="item part2">11</div> 44 <div class="item part2">12</div> 45 <div class="item part3">13</div> 46 <div class="item part3">14</div> 47 </div> 48 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 49 <script> 50 51 function waterFall() { 52 53 var widthNum=parseInt($(window).width()/$(".item").outerWidth(true)), 54 allHeight=[]; 55 56 for (var i=0;i<widthNum;i++){ 57 allHeight.push(0) 58 } 59 60 $(".item").each(function () { 61 var $cur=$(this), 62 indx=0, 63 minAllHeight=allHeight[0]; 64 for (var j=0;j<allHeight.length;j++){ 65 if (allHeight[j]<minAllHeight){ 66 minAllHeight=allHeight[j]; 67 indx=j; 68 } 69 } 70 71 $cur.css({ 72 "left":indx*$cur.outerWidth(true), 73 "top":minAllHeight 74 }); 75 allHeight[indx]=minAllHeight+$cur.outerHeight(true); 76 }) 77 78 } 79 80 waterFall(); 81 82 $(window).on("resize",function () { 83 waterFall() 84 }) 85 86 </script> 87 </body> 88 </html>