.HTML 利用封装的 jquerywaterfall.js 方法 完成

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>瀑布流</title>

     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

     <script src="js/jquerywaterfall.js"></script>

     <script>

         $(function(){

           $('.items').waterFall();

         });

     </script>

     <style>

         body{background:#DEE1E6}

         .container{width:1200px;margin:0 auto}

         .items{position:relative}

         .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}

         .item img{display:block;width:100%}

         .item-text{padding:10px;font-size:14px;color:#999}

     </style>

 </head>

 <body>

     <div class="container">

         <div class="items">

             <div class="item">

                 <img src="data:images/1.jpg" alt="">

                 <div class="item-text">

                     <p class="item-title">标题</p>

                     <p class="item-desc">描述信息</p>

                     <p class="item-updataTime">发布时间</p>

                 </div>

             </div>

             <div class="item">

                 <img src="data:images/2.jpg" alt="">

                 <div class="item-text">

                     <p class="item-title">标题</p>

                     <p class="item-desc">描述信息</p>

                     <p class="item-updataTime">发布时间</p>

                 </div>

             </div>

             <div class="item">

                 <img src="data:images/3.jpg" alt="">

                 <div class="item-text">

                     <p class="item-title">标题</p>

                     <p class="item-desc">描述信息</p>

                     <p class="item-updataTime">发布时间</p>

                 </div>

             </div>

             <div class="item">

                 <img src="data:images/4.jpg" alt="">

                 <div class="item-text">

                     <p class="item-title">标题</p>

                     <p class="item-desc">描述信息</p>

                     <p class="item-updataTime">发布时间</p>

                 </div>

             </div>

             <div class="item">

                 <img src="data:images/5.jpg" alt="">

                 <div class="item-text">

                     <p class="item-title">标题</p>

                     <p class="item-desc">描述信息</p>

                     <p class="item-updataTime">发布时间</p>

                 </div>

             </div>

             <div class="item">

                     <img src="data:images/6.jpg" alt="">

                     <div class="item-text">

                         <p class="item-title">标题</p>

                         <p class="item-desc">描述信息</p>

                         <p class="item-updataTime">发布时间</p>

                     </div>

             </div>

             <div class="item">

                     <img src="data:images/7.jpg" alt="">

                     <div class="item-text">

                         <p class="item-title">标题</p>

                         <p class="item-desc">描述信息</p>

                         <p class="item-updataTime">发布时间</p>

                     </div>

             </div>

             <div class="item">

                     <img src="data:images/8.jpg" alt="">

                     <div class="item-text">

                         <p class="item-title">标题</p>

                         <p class="item-desc">描述信息</p>

                         <p class="item-updataTime">发布时间</p>

                     </div>

             </div>

             <div class="item">

                     <img src="data:images/9.jpg" alt="">

                     <div class="item-text">

                         <p class="item-title">标题</p>

                         <p class="item-desc">描述信息</p>

                         <p class="item-updataTime">发布时间</p>

                     </div>

             </div>

             <div class="item">

                     <img src="data:images/10.jpg" alt="">

                     <div class="item-text">

                         <p class="item-title">标题</p>

                         <p class="item-desc">描述信息</p>

                         <p class="item-updataTime">发布时间</p>

                     </div>

             </div>

         </div>

     </div>

 </body>

 </html>

.jquerywaterfall.js

 $.fn.waterFall=function(){

     // 要计算每一个item元素的left、top值,宽度都是一样，不一样的是高度

     //计算每一个item元素的left值，需要知道每一个item元素的宽度，以及 元素间距

     let $items= $(this);

     let parentWidth=$items.width();//总宽度1200px

     let column = 5;//5列

     let $childRen = $items.children('.item');//获取所有 item元素

     let W =$childRen.width();//获取item 元素的宽度

     console.log(W);

     let space =(parentWidth-column*W)/(column-1);//获取 元素之间的间距

     let arrHeight=[];//存储一下,一行中所有item元素的高度

     $childRen.each(function(index,dom){

         $dom =$(dom);

         if(index<column){//计算前面5列的位置

             $dom.css({top:0,left:index*(W+space)});//设置css样式

             arrHeight.push($dom.height());//存储一下,一行中所有item元素的高度

         }else{

             //计算后面元素的位置

             console.log(arrHeight);

             let minIndex = 0;

             //找到最矮一列的高度 以及 索引值

             let minHeight= arrHeight[minIndex];

             for(let i = 0 ; i<arrHeight.length ; i++){

                 if(minHeight>arrHeight[i]){

                     minHeight=arrHeight[i];

                     minIndex=[i];

                 };

             }

             console.log(minHeight);

             //找到之后，更改item的位置

             $dom.css({top:minHeight+space,left:minIndex*(W+space)});

             //拿到最矮的那一列，重新赋值 因为你在最矮的一列添加了元素

             arrHeight[minIndex]=minHeight+space+$dom.height();

         }

     });

 };

效果图

前端-PC端瀑布流【10张图】的更多相关文章

  1. 面试问了解Linux内存管理吗？10张图给你安排的明明白白！

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 今天来带大家研究一下Linux内存管理.对于精通 CURD 的业务同学 ...

  2. 前端jQuery实现瀑布流

    瀑布流是我们经常会见到的东西,一直刷新一直有,其实它实现起来是很简单的.具体代码如下 1.css代码 <style> *{ margin:; padding:; } .container{ ...

  3. 使用vue做移动端瀑布流分页

    讲到瀑布流分页有一个方法一定是要用到的 pullToRefresh() 这个也没什么好解释的,想了解的可以去百度一下 下面上代码 <div id="main" class=& ...

  4. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  5. web前端学习笔记-瀑布流的算法分析与代码实现

    瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...

  6. 10 张图打开 CPU 缓存一致性的大门

    前言 直接上,不多 BB 了. 正文 CPU Cache 的数据写入 随着时间的推移,CPU 和内存的访问性能相差越来越大,于是就在 CPU 内部嵌入了 CPU Cache(高速缓存),CPU Cac ...

  7. 10 张图聊聊线程的生命周期和常用 APIs

    上一篇文章我们聊了多线程的基础内容,比如为什么要使用多线程,线程和进程之间的不同,以及创建线程的 4 种方式.本文已收录至我的 Github: https://github.com/xiaoqi666 ...

  8. 前端 PC端兼容性问题总结

    1.如果图片加a标签在IE9-中会有边框 解决方案: img{border:none;} 2.rgba不支持IE8 解决方案:可以用 opacity  eg: opacity:0.7;/*FF chr ...

  9. 用10张图来看机器学习Machine learning in 10 pictures

    I find myself coming back to the same few pictures when explaining basic machine learning concepts. ...

随机推荐

  1. Oracle DataGuard日志传输

    1. 日志传输方式 有两种日志传输方式(ARC和LGWR),第一种是采用ARC进程传输日志,其示意图如下: 注:上图来自<大话Oracle RAC> 其大致过程如下: 1)主库:日志先写入 ...

  2. 【Unity 系统知识】 Time类

    [转载请注明出处] //表示时间总量Time.time:(只读)表示从程序运行的总时间,会随着游戏的暂停而停止计算.Time.unscaledTime:(只读)不考虑timescale对时间修改的总时 ...

  3. jdk （Java Development Kit）

    JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具. JD ...

  4. [LeetCode] 421. Maximum XOR of Two Numbers in an Array（位操作）

    传送门 Description Given a non-empty array of numbers, a0, a1, a2, … , an-1, where 0 ≤ ai < 231. Fin ...

  5. SQL标量函数

    调用 MS SQL 标量值函数,应该在函数前面加上 "dbo.",否则会报 “不是可以识别的 内置函数名称”错误.例如 DECLARE @WhichDB TINYINT;     ...

  6. Spring MVC处理

    1.首先,用户发送请求,DispatcherServlet会拦截请求,但DispatcherServlet收到请求后不进行处理,而对URL进行解析得到相应的URI(资源标识符). 2.Dispatch ...

  7. 08 (h5*) js第9天--原型、继承

    目录: 1:原型和原型链 2:构造函数的原型可以改变 3:原型的最终指向 4:先修改原型指向,在添加方法. 5:实例对象中的属性和原型属性重合, 6:一个神奇的原型链 7:继承 8:原型链 9:利用c ...

  8. sed查找实例：mysql_process.sh

    标准 #!/bin/bash # FILE_NAME=/home/roo/Desktop/shell_code/day6/my.cnf # 获取所有的片段 function get_all_segme ...

  9. Python 学习笔记20 自定义robot Framework 关键字

    Robot Framework 自定义关键字 Robot framework 自定义了一些关键字我们可以把他们当作函数在设计测试用例的时候使用. 同时RF也提供了许多第三方的库,我们可以自己下载使用. ...

  10. Java 不被看好前景堪忧？可能是想多了！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 来源:代码湾 Java发行二十多年来,尤其是在战胜C和C++成为最受程序员喜欢的编程语言之后,一直都是开发者的宠儿. 虽然斯 ...