发布于:2018-01-18 09:56:59
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> div.item{ position: absolute; width: 200px; margin: 10px; transition: all 1s; } div#content{ position: relative; } .part1{ background-color: yellow; height: 200px; } .part2{ background-color: lightblue; height: 400px; } .part3{ background-color: pink; height: 300px; } </style> </head> <body> <div id="content"> <div class="item part1">1</div> <div class="item part2">2</div> <div class="item part3">3</div> <div class="item part1">4</div> <div class="item part1">5</div> <div class="item part2">6</div> <div class="item part2">7</div> <div class="item part3">8</div> <div class="item part1">9</div> <div class="item part2">10</div> <div class="item part2">11</div> <div class="item part2">12</div> <div class="item part3">13</div> <div class="item part3">14</div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script> function waterFall(elm) { var $el = $(elm); var widthNum=parseInt($el.width()/$el.children().outerWidth(true)), allHeight=new Array(widthNum); for (var i=0;i<widthNum;i++){ allHeight[i]=0; } console.log(allHeight); $el.children().each(function(){ var $cur=$(this),indx=0, minAllHeight=allHeight[0]; for (var j=0;j<allHeight.length;j++){ if(allHeight[j]<minAllHeight){ minAllHeight=allHeight[j]; indx=j; } } $cur.css({ "left":indx*$cur.outerWidth(true), "top":minAllHeight }); allHeight[indx]=minAllHeight+$cur.outerHeight(true); }) $el.height(Math.max.apply(null, allHeight)); } waterFall('#content'); $(window).on("resize",function () { waterFall('#content'); }) </script> </body> </html>
登录后可以留言提问!
微信扫码登录