简单的waterfall

文章从http://www.jianshu.com/p/6b59367cf53a节选出来

知识点汇总:

outerWidth()是计算一个容器的大小,包括盒子的基本宽度和padding和border和margin(可选),如果设置outerWidthW(true),则算上margin值

 1 <style>
 2         .box{
 3             width: 100%;
 4             margin: 0;
 5             position: relative;
 6         }
 7         .item{
 8             transition: all 1s;
 9             width: 200px;
10             margin-right: 10px;
11             margin-bottom: 10px;
12             position: absolute;
13         }
14         .part1{
15             background-color: yellow;
16             height: 100px;
17         }
18         .part2{
19             background-color: skyblue;
20             height: 200px;
21         }
22         .part3{
23             background-color: orange;
24             height: 300px;
25         }
26     </style>
27 
28     <div class="box">
29         <div class="item part1">1</div>
30         <div class="item part2">1</div>
31         <div class="item part3">1</div>
32         <div class="item part3">1</div>
33         <div class="item part3">1</div>
34         <div class="item part2">1</div>
35         <div class="item part1">1</div>
36         <div class="item part3">1</div>
37         <div class="item part2">1</div>
38         <div class="item part1">1</div>
39         <div class="item part2">1</div>
40         <div class="item part3">1</div>
41         <div class="item part1">1</div>
42         <div class="item part2">1</div>
43         <div class="item part1">1</div>
44     </div>
 1 <script src="jquery-3.2.1.js"></script>
 2     <script>
 3         function waterfall(){
 4             var allColumns = parseInt($(".box").width()/$(".item").outerWidth(true));
 5             // 计算总的列数
 6             console.log(allColumns);
 7             var allHeight=[];
 8             // 定义一个数组,存放所有的列的高度
 9             for(var i=0;i<allColumns;i++){
10                 allHeight.push(0);
11                 // 初始化所有的高度
12             }
13             console.log(allHeight);
14             $(".item").each(function(){
15                 var $cur= $(this);
16                 var minHeight = allHeight[0];
17                 // 假设第一个高度是最小的
18                 var column=0;
19                 // 为后面找到最矮的那列做准备
20                 for(var j=0;j<allHeight.length;j++){
21                     if(allHeight[j]<minHeight){
22                         minHeight = allHeight[j];
23                         // 找出最矮的那列的高度
24                         column = j;
25                         // 找出最矮的那列时第几列
26                     }
27                 }
28                 $cur.css({
29                     "left":column*$cur.outerWidth(true),
30                     "top":minHeight
31                 });
32                 console.log(j*$(".item").outerWidth(true))
33                 allHeight[column]=minHeight+$cur.outerHeight(true);
34                 // 添加元素之后,最矮的那列的高度应该变为原始值加上新加上元素的高度值
35             })
36         }
37         waterfall();
38         window.onresize=function(){
39             waterfall();
40         }
41     </script>

最后效果为:

 

posted @ 2017-09-27 10:44  cyany_blue  阅读(177)  评论(0)  编辑  收藏  举报