.HTML 利用封装的 jquerywaterfall.js 方法 完成
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>瀑布流</title> 8 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 10 <script src="js/jquerywaterfall.js"></script> 11 <script> 12 $(function(){ 13 $('.items').waterFall(); 14 }); 15 </script> 16 17 <style> 18 body{background:#DEE1E6} 19 .container{width:1200px;margin:0 auto} 20 .items{position:relative} 21 .item{width:230px;position:absolute;left:0;top:0;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:20px} 22 .item img{display:block;width:100%} 23 .item-text{padding:10px;font-size:14px;color:#999} 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <div class="items"> 29 <div class="item"> 30 <img src="images/1.jpg" alt=""> 31 <div class="item-text"> 32 <p class="item-title">标题</p> 33 <p class="item-desc">描述信息</p> 34 <p class="item-updataTime">发布时间</p> 35 </div> 36 </div> 37 <div class="item"> 38 <img src="images/2.jpg" alt=""> 39 <div class="item-text"> 40 <p class="item-title">标题</p> 41 <p class="item-desc">描述信息</p> 42 <p class="item-updataTime">发布时间</p> 43 </div> 44 </div> 45 <div class="item"> 46 <img src="images/3.jpg" alt=""> 47 <div class="item-text"> 48 <p class="item-title">标题</p> 49 <p class="item-desc">描述信息</p> 50 <p class="item-updataTime">发布时间</p> 51 </div> 52 </div> 53 <div class="item"> 54 <img src="images/4.jpg" alt=""> 55 <div class="item-text"> 56 <p class="item-title">标题</p> 57 <p class="item-desc">描述信息</p> 58 <p class="item-updataTime">发布时间</p> 59 </div> 60 </div> 61 <div class="item"> 62 <img src="images/5.jpg" alt=""> 63 <div class="item-text"> 64 <p class="item-title">标题</p> 65 <p class="item-desc">描述信息</p> 66 <p class="item-updataTime">发布时间</p> 67 </div> 68 </div> 69 <div class="item"> 70 <img src="images/6.jpg" alt=""> 71 <div class="item-text"> 72 <p class="item-title">标题</p> 73 <p class="item-desc">描述信息</p> 74 <p class="item-updataTime">发布时间</p> 75 </div> 76 </div> 77 <div class="item"> 78 <img src="images/7.jpg" alt=""> 79 <div class="item-text"> 80 <p class="item-title">标题</p> 81 <p class="item-desc">描述信息</p> 82 <p class="item-updataTime">发布时间</p> 83 </div> 84 </div> 85 <div class="item"> 86 <img src="images/8.jpg" alt=""> 87 <div class="item-text"> 88 <p class="item-title">标题</p> 89 <p class="item-desc">描述信息</p> 90 <p class="item-updataTime">发布时间</p> 91 </div> 92 </div> 93 <div class="item"> 94 <img src="images/9.jpg" alt=""> 95 <div class="item-text"> 96 <p class="item-title">标题</p> 97 <p class="item-desc">描述信息</p> 98 <p class="item-updataTime">发布时间</p> 99 </div> 100 </div> 101 <div class="item"> 102 <img src="images/10.jpg" alt=""> 103 <div class="item-text"> 104 <p class="item-title">标题</p> 105 <p class="item-desc">描述信息</p> 106 <p class="item-updataTime">发布时间</p> 107 </div> 108 </div> 109 </div> 110 </div> 111 </body> 112 </html>
.jquerywaterfall.js
1 $.fn.waterFall=function(){ 2 // 要计算每一个item元素的left、top值,宽度都是一样，不一样的是高度 3 //计算每一个item元素的left值，需要知道每一个item元素的宽度，以及 元素间距 4 let $items= $(this); 5 let parentWidth=$items.width();//总宽度1200px 6 let column = 5;//5列 7 let $childRen = $items.children('.item');//获取所有 item元素 8 let W =$childRen.width();//获取item 元素的宽度 9 console.log(W); 10 let space =(parentWidth-column*W)/(column-1);//获取 元素之间的间距 11 let arrHeight=[];//存储一下,一行中所有item元素的高度 12 $childRen.each(function(index,dom){ 13 $dom =$(dom); 14 if(index<column){//计算前面5列的位置 15 $dom.css({top:0,left:index*(W+space)});//设置css样式 16 arrHeight.push($dom.height());//存储一下,一行中所有item元素的高度 17 }else{ 18 //计算后面元素的位置 19 console.log(arrHeight); 20 let minIndex = 0; 21 //找到最矮一列的高度 以及 索引值 22 let minHeight= arrHeight[minIndex]; 23 for(let i = 0 ; i<arrHeight.length ; i++){ 24 if(minHeight>arrHeight[i]){ 25 minHeight=arrHeight[i]; 26 minIndex=[i]; 27 }; 28 } 29 console.log(minHeight); 30 //找到之后，更改item的位置 31 $dom.css({top:minHeight+space,left:minIndex*(W+space)}); 32 //拿到最矮的那一列，重新赋值 因为你在最矮的一列添加了元素 33 arrHeight[minIndex]=minHeight+space+$dom.height(); 34 } 35 }); 36 };
效果图
