<!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. Commons Configuration之二基本特性和AbstractConfiguration

    Configuration接口定义一大堆方法.一切从头开始实现这些方法非常困难.因为AbstractConfiguration类存在.该类在Commons Configuration中充当大多数Con ...

  2. django的基本用法

    1.项目创建 # 新建一个文件夹DjangoProjects# 切换到需要的文件夹创建虚拟环境 C:\Projects\DjangoProjects>python -m venv test_ve ...

  3. PHP设计模式（五）： 原型模式

  4. LeetCode——Nth Digit

    Question Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... ...

  5. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 A题 Weather Patterns

    2017-09-25 15:49:45 writer:pprp 阅读理解,当时没有耐心去读,只要能读懂就大概可以做出来 题意如下: 有四种天气, State 1: snow State 2: rain ...

  6. PAT1072. Gas Station (30)

    题目的测试用例数据有问题! 第一个Case 应该是 G1 2.0 3.2 一直在想3.3分母的3怎么来了.ORZ #include <iostream> #include <ccty ...

  7. 你不知道的东西! c# == 等于运算符 和 Object.Equals()

    最近在看 高级点的程序员必看的     CLR via C#    书中说解释了 Object.Equals()  方法的实现, 其中具体的实现用的是 == 运算符 ! 以前就对 == 运算符 的具体 ...

  8. POJ3768 Katu Puzzle

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. 【Python】@staticmethod和@classmethod的作用与区别

    前言 Python其实有3个方法,即静态方法(staticmethod),类方法(classmethod)和实例方法,一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法.而使用@static ...

  10. ADC和RTC的寄存器的读取

    ADC的寄存器读取,int adc_read(void){ int result; #if ADSTART==0 result = ADC.ADCDAT0&0x3ff; while(!(ADC ...