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>
