<!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>Document</title>

    <style>

        .onload_circle {

            position: fixed;

            top: 50%;

            left: 50%;

            margin-top: -26px;

            margin-left: -26px;

            width: 50px;

            height: 50px;

            border: 1px solid orange;

            border-radius: 50%;

            transform-origin: center center;

            animation: rotate  1s infinite linear;

            transition: all 1s;

        }

        .ball {

            display: inline-block;

            width: 6px;

            height: 6px;

            border-radius: 50%;

            position: absolute;

            left: -3px;

            top: 23px;

        }

        @keyframes rotate  {

            0% {

                transform: rotate(0deg);

            }

            100% {

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body style="">

    <div class="onload_circle">

        <span class="ball"></span>

    </div>

</body>

</html>

　　

 
data.js文件
const data = [

    {

        url: 'images/1.jpg',

        width: 432,

        height: 300,

    },

    {

        url: 'images/2.jpg',

        width: 681,

        height: 966,

    },

    {

        url: 'images/3.jpg',

        width: 480,

        height: 300,

    },

    {

        url: 'images/4.jpg',

        width: 480,

        height: 300,

    },

    {

        url: 'images/5.jpg',

        width: 683,

        height: 1024,

    },

    {

        url: 'images/6.jpg',

        width: 682,

        height: 1024,

    },

    {

        url: 'images/7.jpg',

        width: 1000,

        height: 1500,

    },{

        url: 'images/8.jpg',

        width: 677,

        height: 966,

    },{

        url: 'images/9.jpg',

        width: 667,

        height: 1000,

    },{

        url: 'images/10.jpg',

        width: 400,

        height: 300,

    }

];

　　

上js文件中的图片路径更改成自己需要的路径即可。
index.js文件
 
window.onload = function () {

    let oBox          = document.getElementById('box');

    let aPanel        = Array.from(oBox.children);

    const iPanelW  = aPanel[0].offsetWidth; // 记录列的宽度

    const iImgW    = 220;

    // 计算最多容纳列数

    let iWinW   = document.documentElement.clientWidth;

    let iWinH   = document.documentElement.clientHeight;

    let iMaxCol = Math.floor(iWinW / iPanelW);

    // 指定box的宽度

    oBox.style.width = iMaxCol * iPanelW + 'px';

    // 记录每一列的高度

    let aColH = [];

    // 遍历指定位置

    aPanel.forEach((v, k) => {

        // 如果当前panel为第一排，则top为0

        if(k < iMaxCol) {

            v.style.top = 0;

            v.style.left = k * iPanelW + 'px';

            // 记录每一列的高度

            aColH.push(v.offsetHeight);

        } else {

            // 寻找最矮列的高度值和下标

            var iMinH = Math.min(...aColH);

            var iMinK = aColH.indexOf(iMinH);

            // 指定位置

            v.style.left = iMinK * iPanelW + 'px';

            v.style.top  = iMinH + 'px';

            // 更新列的高度

            aColH[iMinK] += v.offsetHeight;

        }

    });

    // 滚动加载新的数据

    var loadOK = true; // 可以加载新的数据

    window.onscroll = function () {

        let iScrollT = document.body.scrollTop || document.documentElement.scrollTop;

        let oLastPanel = aPanel[aPanel.length - 1];

        if(loadOK && (iWinH + iScrollT > oLastPanel.offsetTop + oLastPanel.offsetHeight / 2)) {

            loadOK = false;

            // 加载新的数据

            data.forEach(v => {

                let oNewPanel = document.createElement('div');

                oNewPanel.className = 'panel';

                // 创建IMG

                let oNewImg = document.createElement('img');

                oNewImg.src = v.url;

                // 计算图片等比缩放后实际的高度

                // 公式：iActualW / iActualH = iScaleW / iScaleH

                let iImgH = v.height * iImgW / v.width;

                oNewImg.style.height = iMinH + 'px';

                oNewPanel.appendChild(oNewImg);

                oBox.appendChild(oNewPanel);

                // 寻找最矮列的高度值和下标

                var iMinH = Math.min(...aColH);

                var iMinK = aColH.indexOf(iMinH);

                oNewPanel.style.left = iMinK * iPanelW + 'px';

                oNewPanel.style.top = iMinH + 'px';

                // 更新列的高度

                aColH[iMinK] += oNewPanel.offsetHeight;

            });

            // 更新最后的列

            aPanel = Array.from(oBox.children);

            // 打开开关

            loadOK = true;

        }

    };

    window.onresize = function () {

        // 更新视窗的宽度和高度

        iWinW   = document.documentElement.clientWidth;

        iWinH   = document.documentElement.clientHeight;

        // 更新列数

        iMaxCol = Math.floor(iWinW / iPanelW);

        // 更新box的宽度

        oBox.style.width = iMaxCol * iPanelW + 'px';

        // 重新排版

        aColH = [];

        // 遍历指定位置

        aPanel.forEach((v, k) => {

            // 如果当前panel为第一排，则top为0

            if(k < iMaxCol) {

                v.style.top = 0;

                v.style.left = k * iPanelW + 'px';

                // 记录每一列的高度

                aColH.push(v.offsetHeight);

            } else {

                // 寻找最矮列的高度值和下标

                var iMinH = Math.min(...aColH);

                var iMinK = aColH.indexOf(iMinH);

                // 指定位置

                v.style.left = iMinK * iPanelW + 'px';

                v.style.top  = iMinH + 'px';

                // 更新列的高度

                aColH[iMinK] += v.offsetHeight;

            }

        });

    };

};

　　

 
 

js之瀑布流的实现的更多相关文章

  1. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  5. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  9. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  10. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

随机推荐

  1. Swift学习笔记 - Swift属性只读

    在OC中我们经常用到只读属性,用readonly修饰一下就行了,但在Swift中已经不是这样修饰的了,下面记录一下Swift中只读属性的使用 在OC中的只读: //只读属性 @property(rea ...

  2. layer弹出层的关闭及父页面的刷新问题

    当在主页面执行添加或修改时,用弹出层是比较好的选择,如何关闭弹出层并对父级页面进行操作呢 首先在父级页面中打开一个添加页面(弹出层) 在添加页面的表单提交函数中添加如下代码: function for ...

  3. 【边框回归】边框回归(Bounding Box Regression)详解（转）

    转自:打开链接 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年 ...

  4. jdk官网历史版本下载&Oracle账号密码

    jdk官网下载地址: https://www.oracle.com/technetwork/java/javase/archive-139210.html 账号密码: 1772885836@qq.co ...

  5. Struts2的select使用

    struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...

  6. mysql术语

    事务 概念:在关系数据库中,一个事物可以是一条sql语句,一组sql语句或整个程序. 特性:事物应该具有4个特性:原子性.一致性.隔离性.持久性.统称为ACID特性. 原子性(A)一个不可分割的工作单 ...

  7. 转 tensorflow模型保存 与 加载

    使用tensorflow过程中,训练结束后我们需要用到模型文件.有时候,我们可能也需要用到别人训练好的模型,并在这个基础上再次训练.这时候我们需要掌握如何操作这些模型数据.看完本文,相信你一定会有收获 ...

  8. MySQL之长连接、短连接、连接池

    当数据库服务器和客户端位于不同的主机时,就需要建立网络连接来进行通信.客户端必须使用数据库连接来发送命令和接收应答.数据.通过提供给客户端数据库的驱动指定连接字符串后,客户端就可以和数据库建立连接了. ...

  9. 【BZOJ1061】【NOI2008】志愿者招募

    [BZOJ1061][NOI2008]志愿者招募 题面 BZOJ 题解 我们设每类志愿者分别招募了\(B[i]\)个 那么,我们可以得到一系列的方程 \[\sum_{S[i]\leq x\leq T[ ...

  10. 在Intellij Idea中使用Maven创建Spring&SpringMVC项目

    环境及版本 Jetbrains Intellij Idea 15.0.6 Spring 4.1.6 JDK 1.8.0_20 Tomcat 8 Windows 10 从 Maven archetype ...