文章从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>
最后效果为:
