前端-PC端瀑布流【10张图】

最新推荐文章于 2024-03-19 22:44:13 发布

weixin_30363817

最新推荐文章于 2024-03-19 22:44:13 发布

阅读量210

点赞数

原文链接：http://www.cnblogs.com/suni1024/p/11098091.html

版权

.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>
  9     <script src="js/template-web.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 };

效果图

转载于:https://www.cnblogs.com/suni1024/p/11098091.html

weixin_30363817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-PC端瀑布流【10张图】

.HTML 利用封装的 jquerywaterfall.js 方法完成 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=d...
复制链接

扫一扫