<!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=gb2312" /><title>无标题文档</title><style type="text/css"> .water-basic { position: relative; } .item { position: absolute; width: 200px; margin: 5px; transition: all 1s; } .box1 { height: 350px; background-color: red; } .box2 { height: 250px; background-color: blue; } .box3 { height: 200px; background-color: gray; } .box4 { height: 300px; background-color: pink; } .box5 { height: 400px; background-color: yellow; } </style> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script></head><body><div class="water-basic"> <div class="item box1">1</div> <div class="item box2">2</div> <div class="item box1">3</div> <div class="item box4">4</div> <div class="item box5">5</div> <div class="item box3">6</div> <div class="item box2">7</div> <div class="item box1">8</div> <div class="item box1">9</div> <div class="item box2">10</div> <div class="item box4">11</div> <div class="item box3">12</div> <div class="item box1">13</div> <div class="item box5">14</div> <div class="item box2">15</div> <div class="item box1">16</div> <div class="item box3">17</div> <div class="item box1">18</div> <div class="item box2">19</div> <div class="item box1">20</div> <div class="item box4">21</div> <div class="item box5">22</div> <div class="item box3">23</div> <div class="item box2">24</div> <div class="item box1">25</div> <div class="item box1">26</div> <div class="item box2">27</div> <div class="item box4">28</div> <div class="item box3">29</div> <div class="item box1">30</div> <div class="item box5">31</div> <div class="item box2">32</div> <div class="item box1">33</div> <div class="item box3">34</div></div> <script type="text/javascript"> var waterBasic = (function(){ function init(){ var nodeWidth = $(".item").outerWidth(true), colNum = parseInt( $(window).width() / nodeWidth ), colSumHeight = []; for (var i=0;i<colNum;i++) { colSumHeight.push(0); } $(".item").each(function(){ var $cur = $(this), idx = 0, minSumHeight = colSumHeight[0]; // 获取到solSumHeight中的最小高度 for (var i=1;i<colSumHeight.length;i++) { if (minSumHeight > colSumHeight[i]) { minSumHeight = colSumHeight[i]; idx = i; } } // 设置各个item的css属性 $cur.css({ left: nodeWidth*idx, top: minSumHeight }) // 更新colSumHeight colSumHeight[idx] = colSumHeight[idx] + $cur.outerHeight(true); }) } // 设置窗口改变时也能重新加载 $(window).on("resize", function(){ init(); }) return { init: init } })(); waterBasic.init();</script></body></html>